Drawing lines with canvas in JavaScript
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();
: