When an image is drawn onto an HTML5 Canvas, invoking ctx.getImageData(0, 0, width, height) returns an ImageData object containing a one-dimensional Uint8ClampedArray. Every pixel occupies four consecutive 8-bit memory slots corresponding to Red, Green, Blue, and Alpha channels (values 0 to 255). By running low-level mathematical operations directly across this typed array, we apply color inversions, grayscale conversions, and duotone gradients at native machine speed.

Duotone printing originated in traditional mechanical lithography and darkroom photography. Printing photographs with a single black ink produced limited tonal range and flat mid-tones. Photographers discovered that by making two half-tone printing plates of the same image—one inked in black or dark navy for the shadow depths, and a second inked in warm sepia, gold, or cyan for highlights—they could produce richer, more luminous dynamic range.

The human eye's retina contains three types of cone photoreceptors, with photopic sensitivity peaking strongly in the green spectrum (~555 nm) and lowest in the blue spectrum. A simple arithmetic average ((R+G+B)/3) makes pure green look unnaturally dark and pure blue look unnaturally bright. The ITU-R BT.601 standard weights green at 58.7%, red at 29.9%, and blue at 11.4%, mirroring human optical perception.

First, the pixel's photopic luminance value (0 to 255) is calculated to determine its tonal depth. This normalized value (0.0 to 1.0) is then used as a linear interpolation factor (lerp) between your chosen Shadow Color (Color A) and Highlight Color (Color B). Pure black pixels become Color A, pure white pixels become Color B, and mid-tones smoothly blend across the chromatic gradient.

No. The canvas dimensions exactly match your original source photograph's native pixel width and height. Every pixel in the original matrix is transformed in place, preserving 100% of your camera sensor's original clarity.