JavaScript Day 4 : Canvas Basics

I really only wanted to use my wirelib library as an example of JavaScript. It’s not my intention two write all month about that alone. So today I figured I’d cover the basics of how to get set up using canvas. You’ve probably already taken a peek into wirelib.js and seen what’s going on, but let’s cover it anyway.

First of all you need a canvas to draw on. This can generally be created right in your html markup, as we have been doing.

[php lang=”javascript”]

[/php]

Note the doctype declaration for html5 is very simple: . Don’t add anything else to this. I’m not being lazy. That’s exactly how it’s written. Here I’ve left out the wirelib.js library, but will keep using jQuery. We’ll start out with the basic document ready construct of jQuery in the mar04.js file:

[php lang=”javascript”]$(function() {

});[/php]

Now let’s get a reference to the canvas by its id:

[php lang=”javascript”]$(function() {
var canvas = $(“#canvas”)[0];
});[/php]

Remember that $(“#canvas”) is the jQuery to get a list of elements with the id “canvas”, and [0] will get the first element of that list.

All drawing on a canvas is done through its context. If you’re coming from the Flash world, think of a canvas as a sprite, and context as the sprite’s graphics property. You get a canvas’s context by saying canvas.getContext(“2d”). Currently, “2d” is the only thing that works with any certainty. Eventually you’ll probably be able to get a 3d context. Let’s do that and clean it up with a single var line.

[php lang=”javascript”]$(function() {
var canvas, context;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
});[/php]

Drawing is generally done by creating paths. A path is begun with beginPath, and ended with another call to beginPath. There is no endPath. Some of the simplest path commands should be pretty familiar to you: moveTo, lineTo. You can draw a path at any time by calling stroke or fill. Let’s draw a line:

[php lang=”javascript”]$(function() {
var canvas, context;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);

context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.stroke();
});[/php]

A circle is drawn, somewhat counter-intuitively, with the arc function. This goes like context.arc(x, y, radius, startAngle, endAngle, counterClockwise). All of those are obvious except the last one, which defines whether the shape will be drawn clockwise or counter-clockwise. This really only makes a difference when you are drawing overlapping shapes, as it will affect whether the overlapping area will be shown or not.

[php lang=”javascript”]$(function() {
var canvas, context;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);

context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.stroke();

context.beginPath();
context.arc(250, 100, 40, 0, Math.PI * 2, false);
context.fillStyle = “#ff0000”;
context.fill();
});[/php]

Here, I’ve begun a new path before starting the circle. You can set a fill style, stroke style, line width, etc, any time before you stroke or fill the path. Here I’ve specified a red fill and only called fill, so there is no stroke.

Even after you’ve stroked a fill or shape, you can change the stroke or fill style, etc, and draw it again:

[php lang=”javascript”]$(function() {
var canvas, context;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);

context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.stroke();

context.beginPath();
context.arc(250, 100, 40, 0, Math.PI * 2, false);
context.fillStyle = “#ff0000”;
context.fill();

context.beginPath();
context.arc(250, 100, 40, 0, Math.PI * 2, false);

context.strokeStyle = “#00ff00”;
context.lineWidth = 10;
context.stroke();

context.strokeStyle = “#000000”;
context.lineWidth = 1;
context.stroke();

});[/php]

And if you need to see it live, or get a link to the source…

These are just the basic basic basics. But once you have these down, it’s easy enough to learn the rest. There’s really not that much to it. Again, I highly recommend the O’Reilly Canvas Pocket Reference. It’s great to have at hand: