Having fun with HTML5 — Canvas, part 1

One of the cool new fea­tures intro­duced by HTML5 is the new <can­vas> tag, which defines an area for you to draw graph­ics on using javascript.


To cre­ate a can­vas ele­ment is as easy as insert­ing a <can­vas> tag like this:

<canvas id="myCanvas" width="400" height="400"></canvas>

Typ­i­cal­ly you will give it an ID as you will need to look it up with javascript lat­er in order to do any­thing with it, and as for the javascript, pret­ty much all javascript that inter­acts with the can­vas need to start with some­thing along the line of:

// get the element by ID
var element = document.getElementById("myCanvas");

// get the 2D context which is what you use to draw
var context = element.getContext("2d");

To make this more robust you’re like­ly to need more plumb­ing code to check whether the brows­er sup­ports the <can­vas> tag and if ele­ment is not null and that the get­Con­text method exists, etc. The eas­i­est way to check for brows­er sup­port for the <can­vas> tag would be to use a sim­ple library like Mod­ern­izr, and all you need is to check the .can­vas prop­er­ty:

<script type="text/javascript" src="modernizr/modernizr-1.6.min.js"></script>
$(document).ready(function () {
    // check if canvas is not supported
    if (!Modernizr.canvas) {
        // fall back logic here
    } else {
        // normal steps here

Once you’ve got the 2D con­text (spec­i­fi­ca­tion for a 3D con­text is in the pipeline and some ven­dors have released their own 3D con­text API) you can use it to draw paths, shapes, text, etc. etc.


See­ing as all the action around a can­vas ele­ment is cen­tred around the 2D con­text, it’s only fit­ting that it gets its own spec­i­fi­ca­tion. The full spec­i­fi­ca­tion (work in progress of course) of the 2D con­text object can be found here.

Have a look at the links in the Ref­er­ences sec­tion for some use­ful arti­cles which go through the var­i­ous API calls you’ll like­ly need to use in detail.

Resetting a canvas

Set­ting the width or height of the can­vas ele­ment will erase its con­tents and reset all the prop­er­ties of its draw­ing con­text to their default, so some­thing like this will suf­fice:

var canvas = $("#myCanvas");
canvas.width = canvas.width;


Once you’ve had a chance to look at the basic API meth­ods, I’ve put togeth­er a quick exam­ple here to demon­strate how to draw some basic gra­di­ents using two stop and how to draw a chess­board using the fill­Rec and stro­keRect meth­ods:

// draws a chess­board
func­tion draw­Chess­board() {
// define the con­stants
var baseX = 0.5, baseY = 0.5, width = 50;
// get the 2D con­text from the “chess­board” can­vas
var con­text = document.getElementById(“chessboardCanvas”).getContext(“2d”);

// draws the 8 by 8 chess­board
for (var i = 0; i 8; i++) { for (var j = 0; j 8; j++) { var x = baseX + width * i, y = baseY + width * j; // draw the rec­tan­gle context.strokeRect(x, y, width, width); // fill the odd num­ber rec­tan­gles if ((i + j) % 2 != 0) { context.fillRect(x, y, width, width); } } } } [/code] The baseX and baseY are set to 0.5 for the rea­son explained in the Dive into HTML5 arti­cle (see ref­er­ence), that if you draw a one pix­el wide line between whole num­ber coor­di­nates you will end up with a two pix­els wide line instead.

The rest is fair­ly straight for­ward and draws a 8x8 chess­board of alter­nat­ing emp­ty and filled squares, left to right, top to bot­tom, with the first square being unfilled.


Dive into HTML5 – Can­vas

Mozil­la Devel­op­er Center’s can­vas tuto­r­i­al

Related posts:

Hav­ing fun with HTML5 — Can­vas, part 2

Hav­ing fun with HTML5 — Can­vas, part 3

Hav­ing fun with HTML5 — Can­vas, part 4

Hav­ing fun with HTML5 — Can­vas, part 5