Objectives:

By the end of this chapter, you should be able to:

• Draw (and clear) simple shapes on the canvas (squares, triangles, circles)
• Move shapes in the canvas

Drawing

Once you have the canvas element, the next thing you need is the context for drawing. The context is the object that actually let's you draw to the screen. To get the context, do the following:

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

With the context, draw a rectangle:

var upperLeftX = 0;
var upperLeftY = 0;
var width = 50;
var height = 50;
ctx.fillRect(upperLeftX, upperLeftY, width, height);

The above code creates a black rectangle on our blue canvas. To draw with a different color, we need to specify the fillStyle:

ctx.fillStyle = "orange";
ctx.fillRect(upperLeftX, upperLeftY, width, height);

Next, let's draw a triangle. There is no build in way to draw a triangle, but rather you can create a path that defines a shape. So our path will need 3 points:

ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(40, 40);
ctx.lineTo(0, 80);
ctx.fill();
ctx.closePath();

Here's what that looks like.

Let's say you've drawn somethings, and now you want to clear the screen and start over. To do that, you can use clearRect:

var canvasWidth = 400;
var canvasHeight = 400;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

Exercise

Figure out how to draw text on the canvas

Making Things Move

To create movement in the canvas, you need to draw something, clear the screen, then draw something again that has moved slightly.

Before we get there, let's clean up our code a little. In the example below, the code for drawing a square is kept inside of the square object. The square object is responsible for drawing itself based on the properties that it has:

var canvas = document.getElementById("my-canvas");
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
var ctx = canvas.getContext('2d');

var square = {
    corner: [0,0],
    width: 50,
    height: 50,
    color: "red",
    draw: function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.corner[0], this.corner[1], this.width, this.height);
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    square.draw();
}

draw();

The first step to adding movement is to create a drawing loop using setInterval. So rather than calling the draw function directly, setInterval will call it. The more frequently we call draw, the higher the frame rate of our motion is. In other words, the frame rate is the number of screens drawn per second. If we draw a frame every second, we would have a frame rate of 1 frame per second. Typically, if you want the motion too look natural, you want a frame rate of at least 20 frames per second:

// Drawing every 50ms = 20 draws in 1 second or 20 fps
var intervalId = setInterval(draw, 50);

Now in the console if you do the following:

square.corner = [50, 50];

You should see the square being redrawn somewhere else.

Now to make the square move diagonally across the screen, modify the draw function to update the corner of the square slightly on each draw:

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    square.corner[0] += 2;
    square.corner[1] += 2;
    square.draw();
}

Now you should see a square moving diagonally across your screen! Here's what that looks like.