HTML Canvas

Create complex 2D and 3D shapes and animations with HTML and JS.

The HTML Canvas element creates an area in which you can draw and manipulate pixels individually to create custom shapes and complex animations. You interact with the canvas using a number of JavaScript methods. Source.

Creating a canvas-based drawing is really quite simple, you create the canvas element in an HTML document <canvas id = “canvas” height = “200px” width = “200px”></canvas> and then you target it with JS like so: let canvas — document.querySelector(“#canvas”). After that point you are able to use the full set of JS API commands to manipulate the pixels inside the canvas.

Here is an example of a canvas used to draw two squares on a web page:

This code outputs the following two squares:

The next level of complexity in Canvas usage is a 2d animation. Below I use the setInterval() method to clear and draw on the canvas 20 times a second, moving the above image back and forth across the canvas surface.