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).
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).
The following data is hard-coded.
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.
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.
This may already be linked to in the course itself (Michel, our instructor, provides tons of links for those who wish to delve further into each concept), but I happened across a site dedicated to the canvas element: HTML5 Canvas Element Tutorial