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() |