Drawing Shapes

Canvas only directly supports the drawing of rectangles, paths, and images. Other shapes must be drawn using paths (discussed below).

Rectangles

Drawing rectangles is as simple as setting the fillStyle then calling fillRect with the x, y, width, and height of the rectangle. To draw just the outline of a rectangle, set the strokeStyle and lineWidth, then call the strokeRect function.

The following code draws a filled rectangle and two stroked rectangles:

c.fillStyle = "red";
c.fillRect(10,10,50,50);

c.strokeStyle = "blue";
c.lineWidth = 1;
c.strokeRect(70,10,50,50);
c.strokeRect(130.5,10.5,50,50);

This code produces the following result:

Notice in the code above that the third rectangle starts drawing at an x and y of 130.5 and 10.5. When drawing a shape with a stroke, it is essentially tracing the outline of the shape using a pen with a width determined by the lineWidth property. The pen is centered on the edge of the shape, which means a one pixel wide stroke would actually draw half a pixel outside and half a pixel inside, resulting in a blurry line (as seen in the second rectangle). To make the line perfectly smooth, it is best to offset the drawing by an extra 0.5 pixel.

The fillStyle and strokeStyle attributes must be set using the CSS color syntax, which can either be color names or hex values.

Paths

In Canvas, a path is a shape composed of line and/or curve segments. The path may be either open or closed. A path is closed if the first and last points meet, otherwise it is open.

Note: Only closed paths can be filled.

Lines

Paths are defined by calling beginPath(), issuing some drawing commands, then calling closePath(). Once the path is defined, it can be filled or stroked.

The following code defines a triangle using the moveTo() and lineTo() commands, then fills and strokes the triangle:

c.fillStyle = "red";

c.beginPath();
c.moveTo(10,10);
c.lineTo(60,10);
c.lineTo(60,60);
c.lineTo(10,10);
c.closePath();

c.fill();

c.lineWidth = 1;
c.strokeStyle = "blue";
c.stroke();

This code produces the following result:

Curves

Curves are drawn using the bezierCurveTo() command, which will draw a bezier curve connected to the previous point and a new point defined by the last two arguments. The first four arguments are for the control points of the curve.

c.fillStyle = "red";

c.beginPath();
c.moveTo(10,40.5);
c.bezierCurveTo(10,80,60,0,60,40.5);
c.closePath();

c.fill();

c.lineWidth = 1;
c.strokeStyle = "blue";
c.stroke();

This code produces the following result:

Arcs

Arcs and Circles can be drawn using the arc() and arcTo() functions.

c.fillStyle = "green";

c.beginPath();
c.arc(60,60,30,Math.PI,3*Math.PI/2);
c.strokeStyle='rgb(0,200,12)';

c.lineWidth = 10;
c.stroke();

This code produces the following result:

Note: In the example above, there is no matching 'endPath'. In this case it is not necessary since we are not closing the path.

Quadratics

Quadratics can be drawn using the quadraticCurveTo() function.

Browser Support

The following table lists the attributes / methods related to this section and their browser compatibility:

	Firefox	IE	Chrome	Opera	Safari
Attributes / Methods
fillRect()
strokeRect()
clearRect()
beginPath()
closePath()
moveTo()
lineTo()
fill()
stroke()
bezierCurveTo()
arc()
arcTo()
quadradicCurveTo()