CanvasRenderingContext2DfillRect

Canvas rendering is the process of drawing graphics onto the HTML canvas element using scripting, typically JavaScript. The canvas element provides a blank bitmap surface in a web page that can be painted programmatically. Rendering is performed via a rendering context, with the two most common contexts being 2D and WebGL. The 2D context, represented by CanvasRenderingContext2D, offers immediate-mode drawing of shapes, images, and text. The WebGL contexts (WebGLRenderingContext or WebGL2RenderingContext) enable hardware-accelerated graphics through shaders and buffer-based rendering, suitable for 3D graphics and complex visual effects.

In a typical workflow, a script obtains the rendering context from a canvas element, sets drawing state, and issues commands such as drawing paths, filling shapes, rendering images, or drawing text. The content on the canvas is bitmap-based and persists until redrawn; each frame often uses requestAnimationFrame to update the display, supporting animations and interactive graphics. The 2D context exposes features like transformations, clipping, gradients, patterns, and compositing operations, while the WebGL context provides programmable pipelines, buffers, textures, and shaders.

Canvas rendering is widely supported across modern browsers and is commonly used for games, data visualizations, photo editing previews, and custom UI components. Developers must consider device pixel ratio for sharp rendering, cross-origin image handling to avoid tainting, and performance implications of frequent redraws versus selective updates. Alternatives include SVG for vector graphics and CSS-based rendering.