Function wrap

Returns an object that allows get/set grid semantics on the underlying image data. Uses 8-bit sRGB values, meaning 0..255 range for red, green, blue & opacity.

// Get CANVAS element, drawing context and then image data
const canvasEl = document.querySelector(`#my-canvas`);
const ctx = canvasEl.getContext(`2d`);
const imageData = ctx.getImageData();

// Now that we have image data, we can wrap it:
const asGrid = ImageDataGrid.wrap(imageData);
asGrid.get({ x:10, y: 20 }); // Get pixel at 10,20
asGrid.set(colour, { x:10, y: 20 }); // Set pixel value

// Display changes back on the canvas
ctx.putImageData(imageData, 0, 0)
Copy