One way to display graphics is to use the img element in HTML. However, that only displays static images with a fixed URL. To draw and display dynamic graphics, we can use the HTML canvas element.
Creating a New Canvas
To create a new canvas element:
<canvas style='width: 200px; height: 200px'>
</canvas>
It looks like the img element, but it has no src or alt attributes. This is because it’s not a fixed image element.
We can style with CSS as we did above, with width , height , margin, border , padding , etc.
Fallback content
For browsers that don’t support canvas, we can supply fallback content by putting something inside. For example, we can write:
<canvas style='widthL 200px; height: 200px'>
Your browser doesn't support canvas.
</canvas>
The closing tag </canvas> is required for canvas elements. If it’s not present, the rest of the document will be considered fallback content.
Rendering Context
The canvas element creates a fixed-size drawing surface that exposes one or more rendering contexts — entities to create and manipulate the content drawn.
The most basic is the 2D rendering context. There’s also a 3D rendering context for WebGL and OpenGL ES.
A canvas is initially blank. We have to access the rendering context and draw on it to display something. To do this, we can use the getContext() method of the canvas element. For 2D graphics, we specify '2d' into the getContext() method.
We access the canvas rendering context as follows:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Checking for Support
We can check for support for the canvas element by checking if the getContext method exists, as follows:
const canvas = document.querySelector('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
}
This should be less of a concern these days since almost all modern browsers support the canvas element.
Basic Code
Put it together and we have the following code. The HTML:
<canvas>
Your browser doesn't support canvas.
</canvas>
Then we can add the following CSS:
canvas {
width: 200px;
height: 200px;
border: 1px solid black;
}
Finally, we have this JavaScript code:
const canvas = document.querySelector('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
}
A Simple Drawing
The simple drawing is made up of basic 2D shapes, like rectangles. We create three rectangles with different background colors with the following code:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(100, 0, 0)';
ctx.fillRect(5, 5, 40, 40);
ctx.fillStyle = 'rgba(0, 20, 100, 0.5)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(20, 0, 200)';
ctx.fillRect(25, 25, 95, 90);
It works as follows. After we get the rendering context, we set the background color of the shape with the fillStyle property by setting it a string with the color value. Then we create a rectangle with the coordinates (5, 5) for the top left corner and (40, 40) for the bottom right corner.
The first two arguments are the x and y coordinates of the top-left corner, the last two are the width and height.
The first rectangle is:
ctx.fillStyle = 'rgb(100, 0, 0)';
ctx.fillRect(5, 5, 40, 40);
The color value rgb(100, 0, 0) represents a brownish color.
Likewise, we have:
ctx.fillStyle = 'rgba(0, 20, 100, 0.5)';
ctx.fillRect(10, 10, 50, 50);
This rectangle is to the right and lower than the first. It has a grayish color.
Finally, we have:
ctx.fillStyle = 'rgba(20, 0, 200)';
ctx.fillRect(25, 25, 95, 90);
This one is again to the right and lower than the second rectangle, in blue.
In the end, we get the following:
The drawing is finished once the page with the canvas element has loaded. The coordinates can be outside or inside the rectangle’s dimensions. If it exceeds the dimensions, we won’t see the stuff that’s drawn.
The canvas is useful to draw graphics, whether static or dynamic. We can create a canvas element in HTML, then we can get the canvas element in JavaScript and get the rendering context so we can draw items on it.
We can draw basic shapes on it. We can change the colors of the background with the fillStyle property of the context, then can call the fillRect on it to draw a rectangle.
It takes four arguments: The x, y coordinates of the top left corner for the first two arguments and the x, y coordinates for the bottom right corner for the last two elements.
