An Introduction to the HTML 5 Canvas Element
Rey Bango | September 1, 2010
For those not familiar with it, the HTML 5
<canvas> element provides a rectangular area where you can draw anything you want on. It's pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it.
If we look at the
<canvas> element, the format is just like any other HTML element:
<canvas id="can1" width="300" height="300"></canvas>
Now, I’m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.
The first thing we need to do is create a reference to the
<canvas> element. Remember that I discussed adding an “id” attribute to the element? This is where it comes in handy:
var myCanvas = document.getElementById( "can1" );
You could do the same thing in jQuery this way:
var myCanvas = $( "#can1" );
Next, we’ll use the element’s
getContext() method to grab the rendering context for that element. This is the area within your
<canvas> element where the actual drawing will occur. It doesn’t have to be the same size as your canvas but it needs to fit within it.
var myContext = myCanvas.getContext( "2d" );
We specify “2d” as a parameter because it’s the only rendering context currently supported by the specification so for now, you’re limited to flat drawings.
Now that I have the rendering context, I can begin making my drawing. Using the
strokeStyle properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the
fillRect() methods, I can use the colors defined in those properties to effect the change:
myContext.fillStyle = '#00f'; myContext.strokeStyle = '#f00'; myContext.lineWidth = 4; myContext.strokeRect( 0,0,300,300); myContext.fillRect(0, 0, 300, 300);
Now I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I’m first going to use the
moveTo() method to position my starting point. The two parameters are “x,y” coordinates within your rendering context and I’d like to start at the top and centered:
myContext.moveTo( 150, 0 );
Next, I’ll use the lineTo() method to draw a line to different “x,y” coordinates. Notice that I don’t have to re-use the moveTo() method to reposition the starting point of each line.
myContext.lineTo( 0, 150 ); myContext.lineTo( 150, 300 ); myContext.lineTo( 300, 150 ); myContext.lineTo( 150, 0 );
This code renders a box like this:
The last things I want to do are to adjust the
strokeStyle properties so that they’re a different color:
myContext.fillStyle = '#F63806'; myContext.strokeStyle = "#000";
and then using the
stroke() methods, apply the color changes to the new drawing:
Wooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it's a start. While what I built is fairly simple, the power of
<canvas> can really be seen by visiting Canvasdemos.com. Along with excellent demos built using
<canvas>, it provides tutorials on how to get up to speed on this element.
One really cool thing is that the gaming industry is keenly looking at
<canvas> since it will help them distribute new games without the need for special plugins. Here's a tutorial, for example, that talks about how to create a game using
<canvas>. It certainly won't replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan.
Here's the code to my tutorial:
About the Author
Find Rey on:
- Twitter - @reybango
- Rey's Blog