Validate a contained pixel rectangle before reading a canvas crop

A crop rectangle needs a stated coordinate space. If an application requires a rectangle fully inside the drawing buffer, check that requirement before calling getImageData().

The browser API can return transparent black for the part of a requested rectangle outside the canvas. A stricter application rule can reject that rectangle instead. This example accepts only positive, integer-sized rectangles with nonnegative integer origins.

function containedPixelRect(rect, canvasWidth, canvasHeight) { if (rect === null || typeof rect !== 'object') { throw new TypeError('Expected a rectangle object'); } const { x, y, width, height } = rect; const values = [x, y, width, height, canvasWidth, canvasHeight]; if (!values.every(Number.isSafeInteger) || x < 0 || y < 0 || width <= 0 || height <= 0 || canvasWidth <= 0 || canvasHeight <= 0 || x > canvasWidth - width || y > canvasHeight - height) { throw new RangeError('Rectangle must fit inside the drawing buffer'); } return { x, y, width, height }; } const rect = containedPixelRect( { x: 10, y: 5, width: 20, height: 15 }, 100, 80 ); // In browser code, after obtaining a 2D context: // const pixels = ctx.getImageData(rect.x, rect.y, rect.width, rect.height); 

Use the canvas drawing-buffer dimensions for this check. A rectangle expressed in displayed CSS coordinates needs to be mapped into that coordinate space first. Perform that mapping before using this validator.

Passing the numeric check also does not grant permission to read a canvas containing restricted cross-origin image content. Handle the actual read failure at the call site. Keep that failure distinct from a rejected rectangle so a report can say which condition stopped the operation.

I work on Morphio. For an image crop request associated with that project, I would state the coordinate space and the containment rule with the rectangle values.

API reference: getImageData().