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

:

Practical tasks

enru