GPU

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

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

    Viacheslav Demianov |

    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');

    Each Canvas can have only one Context. Multiple calls of getContext for the same Canvas will return a reference to the same Context.