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.