In this lesson we will be going over the
<canvas> HTML element.
Before we begin
Download a canvas playground to practise the examples.
Canvas is specified using the HTML
<canvas id="canvas-id" width="400" height="500"> </canvas>
Have a look in the
index.html. Can you see the canvas definition?
To render to the canvas, we must use the canvas drawing context, which handles all the nice stuff.
var canvas = document.getElementById('canvas-id'); var context = canvas.getContext('2d');
Depending on if we are filling up a shape, or just drawing the outline, we can use
context.strokeStyleto set the color of the element.
context.fillStyle = 'yellow'; context.strokeStyle = 'purple';
To set the line width:
context.lineWidth = 3;
Before we move on to drawing, let’s try and understand how canvas is laid out.
The upper left corned for the canvas is (0,0) and the lower right (400,500), as our canvas is 400x500.
Let’s place a rectangle 100px away from the top left corner of the canvas.
context.fillRect(100, 100, 50, 100);
Did you make sure you set the color using
context.fillStylebefore running this?
Now let’s add another rectangle, but this time only its outline.
context.strokeRect(300, 100, 50, 100);
Bonus Add a new rectangle outline with dimensions 120x150 at the bottom right of the canvas. The line width of the rectangle should be 1.
Canvas does not have a reset function, but there is a function to clear a specified rectangle called
context.clearRect. You can use it like so:
context.clearRect(0, 0, canvas.width, canvas.height);
Reset the canvas when the Reset button is clicked, by calling the
Draw a line going from the middle left to the bottom right corner of the canvas.
This won’t do anything until we call
context.stroke(), which deals with the painting.
You can also draw an join multiple paths together. Try this out by creating a rectangle with corners at (0, 0), (0, 200), (200, 300) and (200, 0).
context.beginPath(); context.lineWidth = 1; context.strokeStyle = 'purple'; context.moveTo(0,0); context.lineTo(0,200); context.lineTo(200,200); context.lineTo(200,0); context.lineTo(0,0); context.stroke();
To draw circles, you can use the
arc(x, y, radius, startAngle, endAngle, counterClockwise). Angles are expressed in radians. In radians 2π equates to 360°.
context.beginPath(); context.arc(200, 100, 50, 0, Math.PI*2, true); context.closePath(); context.lineWidth = 4; context.stroke();
To fill in the circle, or any other joined elements, we use the
context.fill() method after closing the path.
Exercise Create another circle and fill it with the color blue.
In canvas, we can also use transformations on the current matrix.
First add the rotate method at the bottom of the
If you try pressing the Draw button more than once, you will notice that everything keeps being at a rotated angle after the first time.
To avoid this, when calling any transformation we must save and then restore the state of the canvas.
context.save() context.rotate(10*Math.PI/180); // rotated changes context.restore()
Translate moves the current position. If we are at 10, 10 and we
context.translate(20, 15), then our new position is 30, 45.
context.scale(scaleWidth, scaleHeight). Scale changes the dimensions of the rendered items.
Try tweaking the scale properties. How can you make the shape 5 times bigger?
Exercise - Drawing Hangman!
Download the required files for this exercise or clone them directly from Github
git clone https://gist.github.com/despo/0dc7c874efa544475d66
Using what we’ve learned today, draw Hangman in Canvas.
We have already created the functions to draw the individual parts, so you should be able to create the functions, uncomment them and see hangman being drawn.
Use pen and paper to think about the position of each element. You already know that the top left is 0,0 and the bottom right 400, 500. Use a grid if you are finding it hard.
context.stroke()before and after drawing elements.
Here is our version of Hangman in Canvas.
Plug hangman in the game you created in the last session. You can use conditional statements to control when each part is drawn.
This ends our Drawing in Canvas tutorial. Is there something you don’t understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial send us an email and let us know.