HTML 5 Canvas — The Bottom Line

Using JavaScript to draw graphics

Canvas is an html element which can be used to draw images using JavaScript. It is most commonly used for things like animations, graphs, and creating other line-based graphics that aren’t easy to make using divs.

Rendering Context

In order to display something on your canvas, the first thing you need to do is define its context using the getContext() function. GetContext takes one parameter, which represents how many dimensions the drawing will have. For two dimensional drawings you pass it “2d”. 3D drawing is also possible, but that’s a topic for another day.

Drawing

Ok, now that we have our canvas set how do we draw on it?

The canvas functions as a grid with its origin in the upper left corner. We can use this grid to plan out our image.

Then it’s time to write some JavaScript -

We will be using some predefined functions to set the desired style options, define the steps needed to create the desired image, and then render the image to the canvas.

Before we create our masterpiece let’s look at some of the tools we have available:

1. Move:

moveTo(x,y) moves the pen to the specified coordinates without drawing.

stroke() draws the shape specified by the path using its outline. This is what actually renders your drawing to the canvas.

2. Lines:

lineTo(x,y) draws a line from the current drawing position to the position given as arguments.

3. Arcs:

arc(x, y, radius, startAngle, endAngle, direction) draws an arc centered at the coordinates given, with the specified radius. You must also specify the startAngle and endAngle in the format x * Math.PI and the direction (clockwise or anticlockwise).

Measurement for startAngle and endAngel

arcTo(x1, y1, x2, y2, radius) draws an arc with the given control points and radius, connected to the previous point by a straight line

4. Rectangles:

fillRect(x, y, width, height) draws a filled rectangle with its top left corner at the starting coordinates and the specified width and height.

strokeRect(x, y, width, height) draws an outline rectangle in the same way.

clearRect(x, y, width, height) clears the specified rectangular area making it transparent.

5. Paths:

A path is a series of points, connected by lines that can be of different shapes. Paths can also be closed and filled to make solid shapes. The first step once you start creating a path should be moveTo() to set the beginning position.

beginPath() creates new path. 
Once you call this following drawing commands will be part of that path until the path is rendered.

closePath() adds a straight line connecting to the beginning of the path, closing the shape.

fill() draws a solid shape by filling the path.

strokeStyle() sets the style of the stroke being drawn by the path. The style can be set as a color, gradient or pattern.

Time To Make Some Art!

We can make more complex images by breaking them down into multiple shapes. For example, say I wanted to draw a stick person:

  • First, let’s set our colors for fill and stroke.
  • Then we’ll use moveTo() to situate ourselves in the top center of the canvas and use arc() to draw the head.
  • Next, by calling stroke() and fill() we will render the circle.

Ok, now the body:

  • We’ll start a new path with no fill and a line weight of 5, and position our pen at the center of the head.
  • Using the line tool we draw a line straight down and then a second line at an angle for the leg.
  • Moving the pen back to the point where the first leg connects we can draw the other leg in the opposite direction. Then we can move the pen up to the top of the body and draw the two arms in the same way. Ta-da!

Ok, so its not quite a Picasso, but there is a lot you can do with the canvas tag. Using these basic elements (and a few others) you can do very complicated things including 3D drawings and animations.

(Not drawn with canvas)