canvas

by Matthew Stuart

Back to: HTML

what is canvas?

canvas is an HTML element that we can use to draw graphics on a web page, by using JavaScript – removing the need to use propriety browser plug-ins.

The default canvas is a rectangular area with a width of 300 pixels and a height of 150 pixels. We use JavaScript’s context object to allow us to draw graphics on the fly.

how to draw the canvas

This is the canvas element:

<canvas></canvas>

Note that the canvas elements requires a closing tag!

To define a canvas element with our own dimensions, we can add height and width attributes.

Here is an example of a canvas element with the width and height set to 100 (a square).

<canvas width="100" height="100"></canvas>

To allow us to use JavaScript to target the canvas element, we can add an id attribute. Here is an example:

<canvas id="game" width="150" height="100"></canvas>

As it is, the canvas is transparent and nothing will be visible in the browser. We can add styling to the canvas to make the canvas element visible:

<canvas height="200" width="200" style="border: 1px solid #000000"></canvas>

drawing shapes

To draw shapes, we need to use JavaScript to access the canvas. There is a method in JavaScript, getElementById(), that we can use to achieve this. We append this to document, which is an interface that allows us to access a webpage.

Next, we need to use a built-in HTML object called getContext(). canvas can be used to create both 2d and 3d images, you need to specify which one you will be using.

Either:

getContext("2d");

Or:

getContext("3d");

To draw a shape, we need to decide where to start drawing. There is a method, moveTo(), that we use to specify the coordinates of where we wish to start drawing. moveTo() does not draw anything, think of it as where you would place a pencil if you were about to start drawing on paper. This method takes two parameters, an x and y coordinate. If you wanted to start at a coordinate of x = 50 and y = 25, you would write:

moveTo(50, 25);

We now need to use another method, lineTo(), to say where we would like to draw a line to, with the starting location being the one we set with moveTo(). This method takes two parameters, an x and y coordinate. This method takes two parameters, an x and y coordinate. If you wanted to move to a coordinate of x = 150 and y = 125, you would write:

lineTo(150, 125);

Now, we need to complete our path, by drawing at the coordinates that we have specified. We do this by using a method called stroke(). The default colour is black.

Let’s put all of this together and draw a diagonal line:

drawing lines

drawing triangles

To draw a triangle, we can join 3 lines together!:

drawing circles

We can draw a circle by using a method called arc(). An arc is a part of a circle and we can draw multiple arcs and join them together. The arc() method can take 6 parameters, 1 of these is optional:

arc(x, y, radius, startAngle, endAngle, counterclockwise)

The x and y coordinates specify where the centre of the circle will be. The startAngle determines the angle that the radius starts at and the endAngle where the radius will end. counterclockwise specifies that the circle will be drawn in a counterclockwise manner. If this is omitted, it defaults to clockwise.

When using arc(), angles are measured in radians, not degrees! If you want to, you can convert radians to degrees by using radians = (π/180) x degrees. In JavaScript we can use:

radians = (Math.PI/180) * degrees

drawing rectangles

This allows you to style it (background, border, margin etc). If no styling is applied, then the canvas will be transparent.

Rendering context

We use the canvas element to create a drawing area with a fixed-size that exposes rendering contexts. Examples of available rendering contexts are 2D and 3D.

To draw something you need to use a script to access the context and draw onto it. The canvas element has a method called getContext() that is used to obtain the rendering context and its drawing functions. getContext() takes one parameter, which is the type of conext. We will be drawing in 2d, so we would write:

canvas.getCpntext('2d');

We use a method that allows us to retrieve the node in the DOM that represents the canvas element:

document.getElementById();

We can now use the getContext() method to access the drawing context.

<script type="text/javascript">
      function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>

Drawing on the canvas

The grid

One unit the grid corresponds to one 1 pixel on the canvas. The origin of the grid is the top-left corner, coordinate 0, 0. All elements are placed relative to this origin.

Drawing rectangles

canvas supports two primitive shapes, rectangles and paths. A path is a list of points connected by lines. Any other shape is created by combining one or more paths. There are a number of drawing functions which we can use to create complex shapes.

There are three functions that we can use to draw rectangles on the canvas. For each one you can specify the position of the canvas (relative to the origin) and the width and height of the rectangle.

Syntax to draw a filled rectangle:

fillRect(x, y, width, height);

Example:

fillRect(50, 50, 100, 100);

Syntax to draw a rectangular outline:

strokeRect(x, y, width, height);

Example:

strokeRect(50, 50, 100, 100);

Syntax to clears the specified rectangular area, making it transparent:

clearRect(x, y, width, height);

Example:

clearRect(75, 75, 50, 50);
fillRect(50, 50, 100, 100);

Drawing paths

A path is a list of points, connected by segments of lines that can be of different shapes, curved or not. They can also be a different width and/or colour. A path, or cubpath can be closed.

To make shapes using paths:

  1. Create the path.
  2. Use drawing commands to draw into the path.
  3. Stroke or pill the path to render it.

There are 5 functions that we can use to perform these steps:

beginPath()
This function creates a new path. Once created, any future drawing commands are directed into the path and used to build the path up.

Path methods
Methods to set different paths for objects.

closePath()
This function adds a straight line to the path, going to the start of the current sub-path.

stroke()
This function draws the shape by stroking its outline.

fill()
This function draws a solid shape by filling the path’s content area.

The first step is to call beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs etc), which together form a shape. Every time that this method is called, the list is reset and we can draw a new shape.

The second step is to call methods that specify the paths to be drawn.

The third step (which is optional) is to call closePath(). This method tries to close the shape, by drawing a straight line from the current point to the start. If the shape has already been closed, or there’s only one point in the list, closePath() does nothing.

Drawing triangles

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

You can read about the canvas API in my API course.