Let's start with a simple one - by drawing lines. To understand how this is done, imagine that you have a piece of paper and a pencil. You can draw on this paper, or you can simply move the pencil to the desired point without drawing.
JavaScript works the same way: it has
a pencil (or pen for drawing), you can
move it to the right place using the
moveTo
method, and you can draw
using the lineTo
method.
Both methods take as parameters the
point to move the pen tip to - the
first parameter is the horizontal
coordinate, and the second - vertically.
The origin - the point 0
,
0
- is the upper left corner
of an element.
When the pen moves to the desired point,
the moveTo
method simply moves,
while lineTo
during the move draws
a line from the current position of the
pen to the point it will move to.
However, if you run the above code,
nothing will happen: you need to write
two more commands: the first
beginPath
command must be
specified before starting to draw a
line, and the second stroke
command must be called after all
combinations of moveTo
and
lineTo
to draw a line.
So let's write the working code to draw a line:
Drawing a line
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Drawing a bird
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Drawing a triangle
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Drawing a square
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Closing a shape
To draw a closed shape, it is not necessary
to draw all the lines - the last line can
be drawn automatically and close the shape.
To do this, the closePath
method
should be called before the stroke
method.
This method attempts to close the shape by drawing a straight line from the last point to the first point. If the shape has already been closed or is just a point, then the method does nothing.
Let's draw a triangle
using closePath
:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 150);
//ctx.lineTo(50, 50); - we skip this step
ctx.closePath();
ctx.stroke();
:
Filling a shape
Instead of the stroke
method, you
can use the fill
method - in this
case, the shape doesn't have to be
completely closed - it will be painted
over:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - we skip this step
//ctx.closePath(); - and this one too
ctx.fill();
: