HTML5: Canvas Element

The key factor in enabling the transition from Flash to HTML5 for the Wahoo project was the use of the canvas element. When a move is made during the game it is highlighted by a bright pink arrow beginning from the previous position of a marble and ending with the arrowhead at the new position.

To make this work the line and the arrowhead have to be drawn dynamically given the starting and end coordinates. The HTML5 aspect of this is extremely simple. An empty canvas element is created and defined with id, width and height attributes. The associated javascript is what does all the work. A context is created for the specific canvas element and there a number of functions that allow you to draw the actual objects. The most complicated part was coming up with the geometry calculations that define the parts of the arrow, given the start and end coordinates. That aspect was a little more complex than it was in the old Flash version.