Drawing Shapes on HTML Canvas — Arcs and Rectangles
Tags: javascript, webdev, programming, codenewbie
Published: 2021-01-30 21:31:07

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

The HTML canvas element lets us draw shapes and do various things with them. The most basic things include adding shapes, changing their color, and drawing paths.

In this article, we’ll look at how to draw shapes on the canvas, including arcs and rectangles

### The Grid

Everything on the canvas is located on a grid. The items are positioned by coordinates. The top left corner is the origin (0, 0) and everything is placed relative to that. Normally 1 unit in the grid is 1 pixel on the screen.

The x-coordinate is larger as we move to the right and the y-coordinate increases as we go down.

### Drawing Rectangles

Canvas supports only 2 primitive shapes — the rectangle and paths.

We can draw rectangles by using the `fillRect` method of the rendering context. It takes 4 arguments, which are the x and y coordinates of the top left corner respectively, and the width and height of the rectangle. The rectangle will be filled with a color.

The `strokeRect` method takes the same arguments as the `fillRect` method and let us draw a rectangular outline.

Finally, there’s the `clearRect` method, which clears the specified rectangular area, making it fully transparent. It takes the same arguments as the other 2 methods.

For example, we can use these methods as follows:

```
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillRect(5, 5, 80, 80);
ctx.clearRect(15, 15, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
```

given that we have the following HTML:

```
<canvas>

</canvas>
```

and CSS:

```
canvas {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
```

The `fillRect` draws a rectangle with the black background, which has a clear rectangle drawn with the `clearRect` method over it on the top left. The black rectangle has the top-left corner in (5, 5) and is 80x80 pixels large.

The clear rectangle has its top-left corner on (15, 15) and it’s 60x60 pixels large.

Then we have the rectangle drawn with the `strokeRect` method farther to the bottom right. Its top-left corner is at (50, 50) and it’s 50x50 pixels large.

In the end, we have the following result:

### Drawing Paths

In addition to rectangles, we can draw paths, which are line segments that are connected together. It can be a different shape or color. The path can be closed.

We create paths with the following steps:

1.  We create the path
2.  Use drawing commands to draw into the path
3.  Then we can stroke or fill the path to render it.

There’re a few methods we need to call for drawing paths. We need to call the `beginPath` method to create a new path. Future drawing commands will be directed into the path and build it up.

Then we use 3 other methods to draw the path. We have the `closePath` method to add a straight line to the path, going to the start of the current subpath.

We use the `stroke` method to draw the shape by stroking its outline. Then we can use the `fill` method to fill the path’s content area if we wish.

We move to the coordinates of the screen with the `moveTo` method, which takes the x and y coordinates to move to as arguments. Then we can draw a line from that coordinate to another with the `lineTo` method, which takes the x and y coordinates to draw the line from wherever the current coordinate is.

For example, we can draw a triangle by writing:

```
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(50, 100);
ctx.lineTo(150, 100);
ctx.fill();
```

We first start trying at (100, 50). Then we draw a line from (100, 50) to (50, 100) with the first `lineTo` call. Then we draw from (50, 100) to (150, 100) again with the `lineTo` method. Finally, we called `fill` to draw the shape by filling in the path’s content area.

In the end, we get:

### moveTo Method and Arcs

The `moveTo` method is handy for moving the originating point of the drawing path without drawing anything.

It takes the x and y coordinates that we want to move to.

We can write:

```
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(125, 75);
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.moveTo(135, 75);
ctx.arc(75, 75, 60, 0, 2 * Math.PI);
ctx.stroke();
```

To draw a circle, we move to the rightmost point of the circle with the `moveTo` method. Then we call the `arc` method to draw the arc. The first 2 arguments are the x and y coordinates of the center. The third argument is the radius, the 4th argument is the starting angle and the last argument if the ending angle. 

In the code above, the starting angle is the 3 o’clock position. Clockwise or counterclockwise directions are relative to this point.

We can also pass in an additional boolean argument to specify if we want to draw counterclockwise.

In addition. There’s the `arcTo` method which takes the x and y coordinates of the starting point and the ending point respectively for the first 4 arguments. The 5th argument has the radius of the arc.

After writing that code, we get the following circles.

```
ctx.moveTo(125, 75);
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
```

draws the smaller circle with a radius of 50 pixels, and:

```
ctx.moveTo(135, 75);
ctx.arc(75, 75, 60, 0, 2 * Math.PI);
```

draws the bigger circle with a radius of 60 pixels.

With the canvas element, we can draw shapes easily. There’re methods specifically for drawing rectangles. For curved shapes and lines, we can draw them with the `arc` and `arcTo` methods. 

Shapes can be drawn filled or not depending on our preferences.

We can use the `moveTo` method to move to a given coordinate without drawing anything.