What is the Canvas API, and how does it work?
The Canvas API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. Everything begins with a canvas element in HTML. This element serves as a drawing surface that you can manipulate using the instance methods and properties of the Canvas API.
The Canvas API provides everything you need to create amazing visuals, including shapes, text, animations, and even complex games. It has interfaces like HTMLCanvasElement, CanvasRenderingContext2D, CanvasGradient, CanvasPattern, TextMetrics which provide methods and properties you can use to create graphics in your JavaScript file.
Let’s look at how the Canvas API works so you can start creating graphics with JavaScript.
First, you need to create a canvas element in your HTML file:
<canvas id="my-canvas"></canvas>The canvas element is represented by the HTMLCanvasElement interface, which provides methods and properties for manipulating it. Additionally, you can use methods and properties from other interfaces in the Canvas API.
You can give your canvas a width and height inside the HTML:
<canvas id="my-canvas" width="400" height="400"></canvas>Or you can use the width and height properties of the HTMLCanvasElement interface:
const canvas = document.getElementById("my-canvas");
canvas.width = 400;
canvas.height = 400;For now, you can’t see anything on the screen yet. After creating your canvas element, the next thing to do is to get access to the drawing context of the canvas with the getContext() method of the HTMLCanvasElement interface.
The most common context is 2d, which allows you to draw in two dimensions:
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext('2d');If you log the ctx variable to the console, you’ll see the methods and properties of CanvasRenderingContext2D that you can use to create shapes, colors, lines, and more, along with their default values:
console.log(ctx);Once you have the 2D context, you can start drawing on the canvas.
The Canvas API provides several methods and properties for drawing shapes, lines, and text. One of those is the fillStyle property, which you can combine with the fillRect() method to draw a rectangle or square:
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
// Set the background color
ctx.fillStyle = "crimson";
// Draw a rectangle
ctx.fillRect(1, 1, 150, 100);fillRect takes 4 number values which represent the x axis, y axis, width, and height, respectively.
There’s something on the screen now. You can also draw text or even create an animation. Here’s a canvas to represent text:
<canvas id="my-text-canvas" width="300" height="70"></canvas>To finally draw the text, pass the text into the fillText() method as the first argument, followed by the values for the x and y axis:
const textCanvas = document.getElementById("my-text-canvas");
const textCanvasCtx = textCanvas.getContext("2d");
// Set font family and size
textCanvasCtx.font = "30px Arial";
// Set text color
textCanvasCtx.fillStyle = "crimson";
// Draw the text
textCanvasCtx.fillText("Hello HTML Canvas!", 1, 50);The result in the browser will be the red text Hello HTML Canvas!.
These’s much more you can do with the Canvas API. For example, you can combine it with requestAnimationFrame to create custom animations, visualizations, games, and more.