Notes on software development


Past and future of HTML Canvas. A brief overview of 2D, WebGL, and WebGPU

What is Canvas?

Canvas is an HTML element designed for drawing using JavaScript. It acts as a container for drawing. Like other HTML elements, the Canvas has its own tag and is embedded on the page in the following way:

<canvas id="canvas">Canvas is not supported by your browser</canvas> 

All further operations with Canvas are done using JavaScript. First, we need to create a Canvas object:

const canvas = document.getElementById('canvas');

Then define the Context:

const context = canvas.getContext('2d');

In addition to the Canvas itself, we've created the Context associated with the Canvas. There are different types of Context, each providing its own set of methods or API.

JavaScript Canvas Sprite Animation

Sprite sheets have been used in game development for many years. In web development it allows you to reduce:

  • a number of HTTP requests for downloading many separate images,
  • webserver load as a result of fewer requests,
  • download time as a combined sprite sheet is smaller than the individual files.

I want to share the approach that I used in my games written with canvas and javascript. I think this is a reusable approach for animating different objects on a canvas.

To demonstrate it, I compiled a Sonic sprite sheet from the "Sonic the Hedgehog 3" game.