2.3 KiB
title |
---|
Paths |
Paths in Canvas
Paths are the building block of drawing in Canvas. A path is just a shape. Then, the shape can be drawn on by either stroking it or filling it.
We can create use paths with beginPath
, fill
, and stroke
.
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.fillStyle="black";
ctx.fill();
This creates a black square in the upper-right corner of the canvas. We can change strokes and fills with strokeStyle
and fillStyle
, which both take CSS-like color strings. We can also use lineWidth
to make strokes thicker.
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.moveTo(0, 100);
ctx.lineTo(300, 250);
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.stroke();
There are four basic drawing functions: rect
, moveTo
, lineTo
, and arc
.
rect(x, y, width, height)
adds a rectangle created from (x
,y
) of dimensions (width
,height
) to the path.moveTo(x,y)
moves the pen to a point on the canvaslineTo(x,y)
moves the pen to a point on the canvas, then adds a line between the new point and the old point to the path.arc(x, y, r, ti, tf)
adds an arc (a portion of a circle) at (x
,y
), of radiusr
, and from angleti
totf
to the path.
Note that these functions add to the working path. They don't create new paths.
//example 1
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.rect(100, 100, 50, 50);
ctx.fill();
//example 2
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.beginPath();
ctx.rect(100, 100, 50, 50);
ctx.fill();
The first example will draw two squares, while the second will only draw one since beginPath
discarded the first rectangle on the old working path.
This fact leads to a common mistake in making canvas
animations.
var x = 0;
var y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rect(x, y, 50, 50);
ctx.fill();
x+=1;
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
The above animation, which is supposed to make a square move across the screen, instead creates a long black bar. The reason is that beginPath
is not called inside the draw
loop.
To read more about animation, see the Animation page.