HTML5 - Mastering the Canvas Element (III) - Drawing basic shapes

Finally after all the boring stuff we're ready to start drawing stuff on our screen. In this tutorial, we'll learn to use the canvas API from JavaScript and draw shapes. I'll also give you an insight on contexts!

So, let's jump right in...

Setting up our function

So, before we can actually work with canvas, we need to set up the function that we'll be working with. Also, we'll have to tell the browser to call this function when the page is done loading.

function main(){

}
window.addEventListener("load", main);

All about the context

When the people developing canvas were developing it, they decided to let us draw both 3D and 2D graphics on the screen. That's why they gave us two tools to use the canvas. One for using 2D functions of the canvas and one for using the 3D functions.

The tools are technically called "contexts". All interaction with the canvas is done through this context, like drawing colouring etc.

Fetching our canvas and context in JavaScript

The way you reference the canvas is exactly how you reference other elements, i.e. using the document.getElementById function.

Fetching the context is a bit different. You have to call the getContext method on the canvas element. But you have to tell the browser if you want a 3D tool or a 2D tool. So you pass in "2d" or "3d" as an argument to this function. Here's how:

function main(){
    var canvas = document.getElementById("myCanvas");
    // We gave the id of myCanvas to our canvas
    // Check the previous part if you don't know or forgot

    var context = canvas.getContext("2d");
}

Drawing rectangles

To draw rectangles, we have two functions.

• strokeRect: Used to draw hollow rectangles without any colour in them.
• fillRect: Used to draw solid rectangles with colour in them.

Both the functions take four parameters.

• x: The x coordinate of the starting point of the rectangle.
• y: The y coordinate of the starting point of the rectangle.
• width: The width of the rectangle. In other words, how many pixels right from the starting point of the rectangle will the ending points be.
• height: The height of the rectangle. In other words, how many pixels down from the starting point of the rectangle will the ending points be.

Example:

context.strokeRectangle(100, 100, 100, 100);
context.fillRectangle(250, 100, 100, 100);

This draws two rectangles, one hollow, on solid, of coordinates (100, 100) and (250, 100) which are 100px in width and height.

Note that the colour of the solid rectangle is black. We'll learn to change the colour in upcoming tutorials. Also, the canvas uses a different coordinate system than what you've learnt in math class.

Drawing more shapes

Now that you know to draw rectangles, you also know to draw squares. In upcoming tutorials, I'll teach you to draw more complex shapes.

If you want to learn to draw circles, arcs and curves, I've already explained that in the "arc method explained" tutorial.