Canvas API

A canvas element and its 2D context offer drawing commands for rectangles, paths, arcs, gradients, images, text and transforms, plus direct access to the pixel data. The browser keeps only the resulting pixels, not the shapes, so moving something means clearing and redrawing, usually every frame with requestAnimationFrame. The same element hosts WebGL and WebGPU for 3D, and OffscreenCanvas lets drawing run in a web worker.

It is used for charts, games, image editors, signature pads, photo filters and exporting pictures with toDataURL or toBlob. Because the content is only pixels, screen readers and search engines cannot read it without text alternatives, and working out which shape a click landed on is up to you. SVG suits a smaller number of interactive shapes, and libraries such as Fabric.js and Konva add an object layer on top of canvas.