Using Canvas API in JavaScript
Tags: webdev, programming, javascript, design
Published: 2022-04-11 06:33:20

## What is Canvas API 
From MDN

> The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

> 
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

## How to start using Canvas API 
* Place your script tag in between the HTML `<body>` tags to begin using Canvas. 

```
<canvas id="canvas" width="600" height="600"></canvas>
```
As a convention, the name of the id typically goes by 'canvas'. This of course can be any name of your choosing, just pick a name that optimizes your code flow and makes sense to you. 

Once you have the initial skeleton set-up, two attributes are required when setting up your canvas space. A desired 'width' and 'height' of the canvas needs to be set. Also note these attributes can be altered well into the design process if necessary.

```
let canvas = document.querySelector("#canvas");
const width = canvas.width;
const height = canvas.height;

canvas.width = 400;
canvas.height = 400;
```

## Getting Creative 
Thought these examples, I will be coding in the HTML's *body* tag, nested between *script* tags. You're free to code along with me in the same environment, or move your code into a separate JavaScript file. 

### Setting Up the Basics 
Once we've laid out the skeleton-frame of our HTML code, it's time to implement code that brings our creative desires to life! 

```
 let canvas = document.querySelector("#canvas");
 let context = canvas.getContext('2d');
```
1. Place a 'Document' method in the Script portion of the code and pass the id of the canvas space we've created earlier to begin customizing our graphic. We'll target the id by first typing the symbol of the corresponding attribute. 

**Quick refresher**
`# = id 
. = class. `

2. The code below tells JavaScript the context of the drawing surface we are creating is 2D as opposed to 3D. And this can be used for creating shapes, text, and images.  

`let context = canvas.getContext('2d');`

### First Shape 
I'll begin by creating a rectangle that is outlined in a 4 pixel stroke with the 'strokeRect()' method. The color attribute can be altered by calling the variable chained to 'strokeStyle()', then entering a hex color code or by the name of a color identified by JavaScript. In today's example, I'll use 'green'. The parameters passed to the 'strokeRect()' simply refer to its top-left corner at (100, 100), and gives it a size of 400 units wide (first 400) by 400 tall (second 400).

```
 context.lineWidth = 4;
 context.strokeStyle = 'green';
 context.beginPath();
 context.strokeRect(100, 100, 400, 400); 
 context.stroke();
```

### Outcome 

![Green Outlined Rectangle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb9qeijhp978snc3ton3.png)

### Nested Shapes 

```
context.beginPath();
        context.arc(300, 300, 100, 0, Math.PI*2);
        context.lineWidth = 3;
        context.stroke();
```
### Outcome 

![Green Outlined Circle Inside Rectangle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17bo0jpewk0gra8ykgf4.png)

### Play Around With Your Code 
Add in new shapes, rearrange the size of shapes, etc. just get creative and explore all that you can do with a few tweaks, or major ones! In our example, I created two side circles for the larger main circle that all together posses a Venn diagram positioning amongst each other. 
```
context.beginPath();
        context.arc(400, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();

        context.beginPath();
        context.arc(200, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();
```

### Outcome 

![Three Circles in a Rectangle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8crmyndxp53c1yo85oik.png)

### Resources 
* [MDN Official Canvas API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)