# 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

←→
↑
en ru