Week 3 of HTML5 with the W3Cx/edX - Canvases

Week 3 of the Learn HTML5 from W3C course taught us about the Canvas element, along with the shapes you can draw on it and how it can be manipulated. These work in the major browsers (except for IE, ugh).

Graph Sample

This first sample is a simple graph I created. It demonstrates manipulating the current context (such as translating, rotating and changing the opacity), as well as listening to events and taking action (in this case, the “input” events on the sliders).

It needs work – the top of the graph is cut off slightly, probably due to some faulty math in trying to calculate the sizes of the bars and everything.

Here's the code for the graph at JS Bin.

Floating Robot Head

As I started to get the hang of "translating" the context and manipulating the canvas, I added in some more rotations, played around with arcs (for the shape of the head), gradients (neck, mouth, antenna), a few math equations (for manipulating the eyes, for example), etc.

Here's the full script for floating robot head at JS Bin.

One more thing.. I happened across a site dedicated to the canvas element for those who want to read more:

HTML5 Canvas Element Tutorial

Subscribe to Weekly Updates!

Get an email with the latest posts, once per week...
* indicates required