A Quick and Easy Canvas Tutorial


The HTML5 specification is made up of a lot of factors that contribute to it being one of the coolest out in the industry. The video element alone makes it one of the easiest to put together websites without too many considerations. Aprart from the video element the canvas element stands out as the Fonz of the lot. The coolest project I’ve seen so far is the project Full Screen Mario (Full Screen Mario), easily one of the coolest things Ive seen in a long time. The canvas element utilizes the 2D api, that I will explain in detail further down the post.

The following is a small tutorial introducing you to the canvas element. I am going to take you through some of the basics of the system and hopefully get you interested enough to look deeper into the specification (it’s literally enough to fill volumes).

The Basics:

The easiest way to think about the canvas element is to think what you’re drawing as being drawn onto a grid. each time you need to draw a new line you’ll have to call a new method, otherwise you’ll be looking at a drawing where you did not lift the pen from the page.

Below is a source code for a simple cube:




var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');


This creates the following result:



Some explanation is in order here. The methods described here are as follows:

Arguments: fillRect(x, y, width, height);
This will draw out your first rectangle, you can always style your rectangle with the fillStyle() method, other wise you’ll be looking at black one by default

Arguments: clearRect(x, y, width, height);
This will clear the space inside the rectangle that you first drew, using the arguments you specified.

Arguments: strokeRect(x, y, width, height);
This draws an outline of a rectangle.

Rectangles are awesome because you can create minecraft and minecraft is epic (rectangles = epic).http://myhtml5portal.blogspot.com/2012/12/minecraft-with-javascript-and-canvas.html

A Little Bit More in Depth:

Now we are going to continue with making a radial gradient. It’s a little bit more to rememebr when you’re coding. Gradients are easy to get away with, since thye really only require one or two additional methods, here is some source code:

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    gradient = ctx.createLinearGradient(0,0,0, canvas.height);

gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#000');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.width);

This creates the following result:



In addition to the regular methods we have added to create the rectangle we see an addition to the pack:

Arguments: createLinearGradients(x, y, width, height);
This will create the gradient for you, see how easy that is? You can also create a radial gradient using the the createRadialGradient() method.

I was able to start the color on the top left of using the addColorStop() method and end it on the bottom left. And that is how easy it is to create a gradient.

Even More Advanced

Creating even more advanced shapes can be achieved a number of different ways, one way that circles can be achieved is through the MATH.PI method being called. We will be making a smiley face for our advanced section. Below is the source code:

 var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye

This creates the following result:



Now we see the beginPath(); that I spoke of earlier, that is starting the drawing for us, and from there we can see some new methods being used:

Arguments: arc(x, y, radius, startAngle, endAngle, anticlockwise)
The arc will create an arc (who knew) and the arguments are what is going to give you the shape you want. This is where you would utilize the Math method.

Math.PI uses the pi to calculate the radius and can be multiplied by two to create a full circle.

Arguments: moveTo(x, y);
This will take your pen and move it to the coordinates specified.

Wrap up

The canvas element is awesome, I can’t get over how powerful the 2D api can be coupled with canvas. It paints the picture of the complete web because it make simple tools like HTML and JavaScript can create powerful elements without too much effort. That being said creating simple elements can be easy but creating larger projects can be a lot harder just look into the source code of Fullscreen Mario.

More Learning resources:


Dive Into HTML5


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply