a day ago
- HTML5 canvas allows direct pixel manipulation via three methods: createImageData (empty pixels), getImageData (from existing canvas), and putImageData (set pixels).
- Pixel arrays are stored in row-major order with four integers per pixel representing RGBA (red, green, blue, alpha), each ranging from 0 to 255.
- A setPixel function calculates the array index as (x + y * width) * 4 to access the four channels of each pixel.
- Example: generating random colored pixels or sine-based color gradients demonstrates pixel manipulation.
- When manipulating existing canvas, use getImageData to retrieve pixels, modify them, then putImageData to write back; values must be clamped to 0–255.
- The article includes exercises such as writing a getPixel function, creating gradients, and performing Sobel edge detection.