Category: JavaScript

HTML5 Canvas book review

Book cover of HTML5 CANVAS

  • Author: Steve Fulton, Jeff Fulton
  • publisher: O’Reilly Media
  • pages: 652

Summary

Finally one extensive book over the Canvas element. This should attract the more creative ( Javascript ) programmers. I find it hard to describe the entry level of this book, however I get the feeling that novice to medior (JavaScript) developers should get along with the book.

Review

I like the introduction of the all the canvas properties, the authors filled the book with easy to follow comprehensive examples. The examples let the reader experiment with the features of Canvas. Most of the examples have some minor cross-browser issues since the canvas element is not stable yet, but the book describes these issues open and sincere which I liked. After the reader gets acquainted with the canvas element the books start with game programming and animation mathematics. The animations and math reminds me of former actionscript book, but still I learned a lot from these chapters. Flash cannot be compared one-on-one with canvas regarding; performance, animation, collision detection and resource management.

After the game sections the book briefly touches mobile applications with phoneGap and 3d with webGL. I liked these sections but I am not sure if these sections are relevant for this book.

But still the canvas is an amazing element and this books opens up a new world in html, for example chapter 5 shows some impressive examples of how easy it is to combine video with canvas; transformations, bitmap filtering its all possible. It is exiting to see that every new browser generation will be faster and will open new possibilities.

It would be nice to see some additional information in the next edition regarding business applications, for example how to overcome sandbox issues when uploading images to canvas.

Conclusion

But overall I can recommend this book to every developer who wants to be creative with the web. This book provides a solid path for developing Canvas games/ applications with a solid performance. The books product page

Rotate canvas on mouse drag

Get the source at Github

For a larger project of mine i needed to find a way to rotate cavas elements on mousedrag. So here’s my attempt to create this user interface functionality.

Source and example

Watch the demo

rotate canvas demo

Seperate steps

First I divided the script into logical steps to simplify the problem.

  1. create a update function for the canvas.
  2. setup the mousehandlers to register the “drag” event
  3. create a helper function to calculate the angle between 2 coordinates

The key for this functionality is that the starting angle of the drag always differs. This causes the canvas drawing to jump to unwanted angles if the script does not compensate for this. 

$( model.cnv ).mousedown(function(event){
    // calculate click angle minus the last angle
    var clickAngle = getAngle(cX + offX, cY + offY, event.clientX, event.clientY ) 
       - model.angle;
    $( model.cnv ).bind("mousemove", clickAngle, function(event){
      // calculate move angle minus the angle onclick
      model.angle =  ( getAngle( cX + offX, cY + offY, event.clientX, event.clientY  )
       - clickAngle);
      updateRectangle(model.angle);
    });
});

I have not tested the script with other shapes than rectangles and squares, but the script should work fine as long as the canvas elements have ‘bounding box’ with a width and height. Of course this example is a starting point and the interface could use some custom cursors or icons.