Canvas API
A JavaScript API for pixel-level drawing and image manipulation on HTML5 canvas elements directly in the browser.
The Canvas API, introduced with HTML5, provides a JavaScript interface for pixel-level graphics on <canvas> elements. By obtaining a 2D context via getContext('2d'), developers can draw paths, render text, composite images, and manipulate individual pixels.
For image processing, the standard workflow involves drawing an image with drawImage(), extracting pixel data (RGBA array) via getImageData(), and applying transformations. This enables client-side cropping, resizing, filtering, and color correction without server round-trips.
Many browser-based tools like the image compressor and resize tool rely on Canvas API internally. Results are exported via toBlob() or toDataURL() in JPEG, PNG, or WebP format. For large images, OffscreenCanvas with Web Workers prevents main-thread blocking.