Oct 6, 2009 @ 01:02pm
In this example I'm using Canvas to replace Flash as a means to display and animate a pseudo 3D phone.
I create an image element for each frame of the animation and apply a handler for it's load event. As each image loads it is added to the list of frames, and if it's the final image we're waiting for then the animation is begun.
To animate I draw the image onto the canvas to create the frame, each frame we show replaces the previous content with another stored image.
I was surprised how well this worked, it's not a particularly efficient method but it ran well in the latest browsers when I tested it. Even when using
Excanvas to provide support for IE it ran at full speed.
The only disappointment was it's performance on the iPhone. I'd hoped that Canvas would replace Flash on the iPhone but it rendered the images very slowly. This could have been from the additional scaling performed by Safari on the iPhone, when in landscape view it rendered quicker than in portrait.
View the Canvas image animation demo.
The phone, by the way, is a
BlackBerry Storm.
Sep 14, 2009 @ 05:23pm
There is lots of noise at the moment around HTML 5, and Canvas is a big part of that. You may expect the Canvas element to be a straight replacement for Flash, but it's lacking that level of abstraction present in Flash.
The name canvas is literal, the element only acts as a painting area, there is no time-line and objects/graphics are rendered onto the canvas and not stored on it. Once painted on they can be painted over but not moved or modified.
When painting to the canvas we use its context object, functions of which fall into two groups: painting operations and painting settings. For example, if you change the opacity value it will not affect the current canvas content, but it will affect any further painting operations.
The context object can maintain a history of painting settings, with states stored in a last-in, first-out list. Calling save() pushes the current context state to the history, calling restore() pops the last state from the list and resets the context to that state.
The Canvas is for creating dynamic images, so for most applications you'd probably be better off with normal HTML, or even SVG.
Feb 1, 2009 @ 12:00pm
Background. The Canvas element "is a new HTML element which can be used to draw graphics using scripting". Simple shapes, curves, gradients, transformations and animations are possible with Canvas.
Early days. I love the idea, but the implementation seems sketchy right now. It's not in IE but also there is no support for writing text outside of Firefox.
Change of approach. Canvas is a big step away from the web development conventions you know. Coordinates are all important and it's just not OO enough for me. I've created a bar chart demo (probably the easiest thing you can make) but moving onto creating more complex examples just became frustrating because of the way images can only be drawn when loaded, which stops any loops.
External links. Mozilla Canvas tutorial
