Browser-Based Photo Editing Is Canvas Pixel Manipulation

Every photo editor from Photoshop to Instagram filters does the same thing at the lowest level: read pixel values modify them and write them back. The HTML5 Canvas API gives you direct access to pixel data making browser-based photo editing genuinely powerful. Reading pixel data const canvas = document . createElement ( ' canvas ' ); const ctx = canvas . getContext ( ' 2d ' ); const img = new Image (); img . onload = () => { canvas . width = img . width ; canvas . height = img . height ; ctx . drawImage ( img , 0 , 0 ); const imageData = ctx . getImageData ( 0 , 0 , canvas . width , canvas . height ); const pixels = imageData . data ; // pixels is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...] }; Every four consecutive values represent one pixel: red, green, blue, and alpha (transparency). A 1920x1080 image has 2,073,600 pixels and 8,294,400 values in the array. Brightness adjustment function adjustBrightness ( imageData , amount ) { const data = imageData . data ; for ( let i = 0