fix: use signed integers for canvas APIs that accept negative coordinates (#1227)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Brooooooklyn

__test__/regression.spec.ts

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url'
 import test from 'ava'
 import PNG from '@jimp/png'
 
-import { createCanvas, loadImage, GlobalFonts, Image, DOMMatrix, DOMPoint } from '../index'
+import { createCanvas, loadImage, GlobalFonts, Image, ImageData, DOMMatrix, DOMPoint } from '../index'
 import { snapshotImage } from './image-snapshot'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -456,6 +456,99 @@ test('putImageData double free', (t) => {
   })
 })
 
+// https://github.com/Brooooooklyn/canvas/issues/1226
+test('putImageData with negative dx/dy should draw correctly', (t) => {
+  const canvas = createCanvas(200, 200)
+  const ctx = canvas.getContext('2d')
+  // Fill canvas with black
+  ctx.fillStyle = 'black'
+  ctx.fillRect(0, 0, 200, 200)
+  // Create a 100x100 white ImageData
+  const imageData = new ImageData(100, 100)
+  imageData.data.fill(255)
+  // putImageData at (-20, -20): should place an 80x80 white region at (0,0)
+  ctx.putImageData(imageData, -20, -20)
+  // Pixel at (0,0) should be white (within the drawn region)
+  const topLeft = ctx.getImageData(0, 0, 1, 1).data
+  t.is(topLeft[0], 255)
+  t.is(topLeft[1], 255)
+  t.is(topLeft[2], 255)
+  t.is(topLeft[3], 255)
+  // Pixel at (79,79) should be white (last pixel of the drawn region)
+  const edge = ctx.getImageData(79, 79, 1, 1).data
+  t.is(edge[0], 255)
+  t.is(edge[1], 255)
+  t.is(edge[2], 255)
+  t.is(edge[3], 255)
+  // Pixel at (80,80) should be black (outside the drawn region)
+  const outside = ctx.getImageData(80, 80, 1, 1).data
+  t.is(outside[0], 0)
+  t.is(outside[1], 0)
+  t.is(outside[2], 0)
+  t.is(outside[3], 255)
+})
+
+// https://github.com/Brooooooklyn/canvas/issues/1226
+test('getImageData with negative x/y should return correct pixels', (t) => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext('2d')
+  // Fill entire canvas red
+  ctx.fillStyle = 'red'
+  ctx.fillRect(0, 0, 100, 100)
+  // getImageData(-10, -10, 20, 20): top-left 10x10 is outside canvas (transparent black),
+  // bottom-right 10x10 is canvas pixels (red)
+  const data = ctx.getImageData(-10, -10, 20, 20)
+  t.is(data.width, 20)
+  t.is(data.height, 20)
+  // Pixel at (0,0) in the ImageData corresponds to canvas (-10,-10) — outside, should be transparent black
+  const outOfBounds = [data.data[0], data.data[1], data.data[2], data.data[3]]
+  t.deepEqual(outOfBounds, [0, 0, 0, 0])
+  // Pixel at (5,5) in the ImageData is still outside canvas (-5,-5) — transparent black
+  const stillOutside = 4 * (5 * 20 + 5)
+  t.deepEqual([data.data[stillOutside], data.data[stillOutside + 1], data.data[stillOutside + 2], data.data[stillOutside + 3]], [0, 0, 0, 0])
+  // Pixel at (10,10) in the ImageData corresponds to canvas (0,0) — should be red
+  const insideOffset = 4 * (10 * 20 + 10)
+  t.is(data.data[insideOffset], 255)     // R
+  t.is(data.data[insideOffset + 1], 0)   // G
+  t.is(data.data[insideOffset + 2], 0)   // B
+  t.is(data.data[insideOffset + 3], 255) // A
+  // Pixel at (19,19) in the ImageData corresponds to canvas (9,9) — should be red
+  const cornerOffset = 4 * (19 * 20 + 19)
+  t.is(data.data[cornerOffset], 255)     // R
+  t.is(data.data[cornerOffset + 1], 0)   // G
+  t.is(data.data[cornerOffset + 2], 0)   // B
+  t.is(data.data[cornerOffset + 3], 255) // A
+})
+
+test('getImageData with negative width/height should flip the region per spec', (t) => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext('2d')
+  // Paint a 10x10 green square at (5,5)
+  ctx.fillStyle = 'green'
+  ctx.fillRect(5, 5, 10, 10)
+  // getImageData(15, 15, -10, -10) per spec: sx=15+(-10)=5, sy=15+(-10)=5, sw=10, sh=10
+  // Should return the 10x10 region starting at (5,5) — the green square
+  const data = ctx.getImageData(15, 15, -10, -10)
+  t.is(data.width, 10)
+  t.is(data.height, 10)
+  t.is(data.data.length, 10 * 10 * 4)
+  // Center pixel (5,5) in the ImageData should be green
+  const centerOffset = 4 * (5 * 10 + 5)
+  t.is(data.data[centerOffset], 0)       // R
+  t.is(data.data[centerOffset + 1], 128) // G (green is 0,128,0)
+  t.is(data.data[centerOffset + 2], 0)   // B
+  t.is(data.data[centerOffset + 3], 255) // A
+})
+
+test('createImageData with negative dimensions should use absolute values', (t) => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext('2d')
+  const imageData = ctx.createImageData(-50, -30)
+  t.is(imageData.width, 50)
+  t.is(imageData.height, 30)
+  t.is(imageData.data.length, 50 * 30 * 4)
+})
+
 // https://github.com/Brooooooklyn/canvas/issues/987
 test('draw-canvas-on-canvas', async (t) => {
   const backCanvas = createCanvas(1920, 1080)

src/ctx.rs

@@ -969,13 +969,13 @@ impl Context {
     if let Some(ref recorder) = self.page_recorder {
       return recorder
         .borrow_mut()
-        .get_pixels(x as u32, y as u32, w as u32, h as u32, color_type);
+        .get_pixels(x as i32, y as i32, w as u32, h as u32, color_type);
     }
 
     // Direct mode - read from main surface
     self
       .surface
-      .read_pixels(x as u32, y as u32, w as u32, h as u32, color_type)
+      .read_pixels(x as i32, y as i32, w as u32, h as u32, color_type)
   }
 
   pub fn set_line_dash(&mut self, line_dash_list: Vec<f32>) {
@@ -2016,14 +2016,15 @@ impl CanvasRenderingContext2D {
   pub fn create_image_data<'scope>(
     &'scope mut self,
     env: &'scope Env,
-    width_or_data: Either<u32, Uint8ClampedSlice<'scope>>,
-    width_or_height: u32,
-    height_or_settings: Option<Either<u32, Settings>>,
+    width_or_data: Either<i32, Uint8ClampedSlice<'scope>>,
+    width_or_height: i32,
+    height_or_settings: Option<Either<i32, Settings>>,
     maybe_settings: Option<Settings>,
   ) -> Result<ClassInstance<'scope, ImageData>> {
     match width_or_data {
       Either::A(width) => {
-        let height = width_or_height;
+        let width = width.unsigned_abs();
+        let height = width_or_height.unsigned_abs();
         let color_space = match height_or_settings {
           Some(Either::B(settings)) => {
             ColorSpace::from_str(&settings.color_space).unwrap_or_default()
@@ -2045,9 +2046,9 @@ impl CanvasRenderingContext2D {
       }
       Either::B(mut data_object) => {
         let input_data_length = data_object.len();
-        let width = width_or_height;
+        let width = width_or_height.unsigned_abs();
         let height = match &height_or_settings {
-          Some(Either::A(height)) => *height,
+          Some(Either::A(height)) => height.unsigned_abs(),
           _ => (input_data_length as u32) / 4 / width,
         };
         let data = unsafe { data_object.as_mut() }.as_mut_ptr();
@@ -2717,9 +2718,20 @@ impl CanvasRenderingContext2D {
       let color_space = color_space
         .and_then(|cs| cs.parse().ok())
         .unwrap_or(ColorSpace::Srgb);
+      // Per spec: if sw/sh is negative, flip the origin and use abs value
+      let (sx, sw) = if width < 0.0 {
+        (x + width, -width)
+      } else {
+        (x, width)
+      };
+      let (sy, sh) = if height < 0.0 {
+        (y + height, -height)
+      } else {
+        (y, height)
+      };
       let image_data = self
         .context
-        .get_image_data(x as f32, y as f32, width as f32, height as f32, color_space)
+        .get_image_data(sx as f32, sy as f32, sw as f32, sh as f32, color_space)
         .ok_or_else(|| {
           Error::new(
             Status::GenericFailure,
@@ -2728,8 +2740,8 @@ impl CanvasRenderingContext2D {
         })?;
       let mut data_object = Uint8ClampedSlice::from_data(env, image_data)?;
       let mut instance = ImageData {
-        width: width as usize,
-        height: height as usize,
+        width: sw as usize,
+        height: sh as usize,
         color_space,
         data: unsafe { data_object.as_mut() }.as_mut_ptr(),
       }
@@ -2759,8 +2771,8 @@ impl CanvasRenderingContext2D {
   pub fn put_image_data(
     &mut self,
     image_data: &ImageData,
-    dx: u32,
-    dy: u32,
+    dx: i32,
+    dy: i32,
     dirty_x: Option<f64>,
     dirty_y: Option<f64>,
     dirty_width: Option<f64>,

src/page_recorder.rs

@@ -283,8 +283,8 @@ impl PageRecorder {
   /// Returns pixel data for the requested region.
   pub fn get_pixels(
     &mut self,
-    x: u32,
-    y: u32,
+    x: i32,
+    y: i32,
     width: u32,
     height: u32,
     color_space: ColorSpace,

src/sk.rs

@@ -2144,8 +2144,8 @@ impl Surface {
 
   pub fn read_pixels(
     &self,
-    x: u32,
-    y: u32,
+    x: i32,
+    y: i32,
     width: u32,
     height: u32,
     color_space: ColorSpace,
@@ -2155,8 +2155,8 @@ impl Surface {
       ffi::skiac_surface_read_pixels_rect(
         self.ptr,
         result.as_mut_ptr(),
-        x as i32,
-        y as i32,
+        x,
+        y,
         width as i32,
         height as i32,
         color_space as u8,
@@ -2802,16 +2802,16 @@ impl Canvas {
     }
   }
 
-  pub fn write_pixels(&mut self, image: &ImageData, x: u32, y: u32) {
+  pub fn write_pixels(&mut self, image: &ImageData, x: i32, y: i32) {
     unsafe {
       ffi::skiac_canvas_write_pixels(
         self.0,
         image.width as i32,
         image.height as i32,
         image.data,
         image.width * 4,
-        x as i32,
-        y as i32,
+        x,
+        y,
       );
     }
   }