A hands-on tutorial covering direct pixel manipulation with the HTML5 canvas element. Explains how the ImageData pixel array works (RGBA channels in row-major order), how to create and read pixel arrays using createImageData() and getImageData(), and how to write pixels back with putImageData(). Includes working code examples: drawing random colored pixels, generating a sine-wave color pattern, and applying a blue color filter to an existing image. Also covers value clamping between 0–255 and includes exercises like gradient generation and Sobel edge detection.
Sort: