To draw on a canvas, we need to get a reference to the canvas’ drawing context. Here is an example of drawing a rectangle:
1 2 3 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.fillRect(0, 0, 50, 50);
At the time of this writing there are 4 contexts available:
bitmaprenderer. I’m only going to cover the
2d context in this article.
We can think of the canvas as blank piece of paper where we will draw. The canvas has a width and a height. To reference a point in the canvas we use a coordinate system. The diference between the canvas and the cartesian coordinate system is that the coordinate
(0, 0) is located in the top left corner. Increases in the
x axis will move coordinates to the right (same as cartesian coordinates), but increases on the
y axis will move down (opposite to cartesian coordinates).
Let’s look at how coordinates work by drawing some circles in a canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); // Black circle at 0, 0 context.beginPath(); context.arc(0, 0, 5, 0, 2 * Math.PI); context.fillStyle = "black"; context.fill(); // Red circle at 50, 0 context.beginPath(); context.arc(50, 0, 5, 0, 2 * Math.PI); context.fillStyle = "red"; context.fill(); // Blue circle at 0, 10 context.beginPath(); context.arc(0, 100, 5, 0, 2 * Math.PI); context.fillStyle = "blue"; context.fill(); // Green circle at 80, 80 context.beginPath(); context.arc(80, 80, 5, 0, 2 * Math.PI); context.fillStyle = "green"; context.fill();
The result: https://jsfiddle.net/on7sfux6/
The example above shows how the coordinate system works, but it also shows something that we need to keep in mind when working with canvas.
The size of the canvas is not necessarily the same as the size and ratio of the dom element that contains the canvas. In both the previous examples we are setting the width and height of the dom element with CSS (200px and 300px respectively), but we are using the default canvas size (and ratio). This causes the circles to be distorted (look like ovals).
We can get the actual width and height of the canvas with JS:
1 2 3 const canvas = document.getElementById('canvas'); console.log(canvas.height); console.log(canvas.width);
We can also set it with JS:
1 2 3 const canvas = document.getElementById('canvas'); canvas.height = 200; canvas.width = 300;
Notice that the values don’t contain any units (e.g. px). We can see how setting the size of the canvas to the same as our dom element fixes the issue: https://jsfiddle.net/a4hf5bet/
Alternatively, we could also set the size of the canvas in HTML:
1 <canvas id="canvas" with="300" height="200"></canvas>
We have already drawn rectangles and circles. Let’s look a little more closely at what we did, and other basic shapes we can draw.
Rectangles are one of the simples shapes we can draw. In the first examle we used:
1 context.fillRect(0, 0, 50, 50);
- The first two arguments represent the start corner of the rectangle
- The last two argument are the ending
Circles are a little trickier, in the example we drew a few circles using a command like this:
1 context.arc(80, 80, 5, 0, 2 * Math.PI);
- The first two arguments represent the center of the circle.
(80, 80)in this case
- The third argument represents the radius of the circle
- The fourth argument is where the arc will start (in radians)
- The fifth argument is the end of the arc
The are two main ways to measure angles:
radians. A full circle has 360 degrees or 2π radians. Since we wanted a full circle, we started at 0 and ended at
2 * Math.PI (Which is the same as saying 2π radians).
We can draw lines using
1 2 3 4 5 6 7 8 9 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.moveTo(50, 50); context.lineTo(50, 250); context.lineTo(250, 250); context.moveTo(250, 50); context.lineTo(50, 250); context.stroke();
The result: https://jsfiddle.net/cyufdnrh/
We can also write text to the Canvas:
1 2 3 4 5 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.font = '50px Arial'; context.fillText('Ncona.com', 10, 50);
The result: https://jsfiddle.net/s3xuL7rf/
In the example, we use
fillText to draw the text. We can also use
strokeText if we want to only draw the outline of the text.
We can use the
font option to set the style, font name, size, etc… the same way as we would set a font in CSS.
In this article we learned how to draw simple shapes and text in a canvas. I only scratched the surface; Canvas can be used to create very complex images and animations. In my next article I’m going to show how to do some simple transformations to images.