/ edx

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

Grant Winney

Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.

Read More