fix: clip with nested transforms intersects in device space (#1202)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: Brooooooklyn

__test__/draw.spec.ts

@@ -451,6 +451,98 @@ test('clip-no-divergence-after-promotion', async (t) => {
   await snapshotImage(t)
 })
 
+// Regression test for https://github.com/Brooooooklyn/canvas/issues/1198
+// Nested clips at different transforms should intersect in device space, not raw path coordinates
+test('clip-nested-different-transforms', async (t) => {
+  const canvas = createCanvas(200, 200)
+  const ctx = canvas.getContext('2d')!
+  ctx.fillStyle = 'white'
+  ctx.fillRect(0, 0, 200, 200)
+
+  // Clip 1 at 2x scale: rect(0,0,80,80) → device space 0,0 to 160,160
+  ctx.setTransform(2, 0, 0, 2, 0, 0)
+  const clip1 = new Path2D()
+  clip1.rect(0, 0, 80, 80)
+  ctx.clip(clip1)
+
+  // Clip 2 at identity: rect(0,0,160,160) → device space 0,0 to 160,160
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  const clip2 = new Path2D()
+  clip2.rect(0, 0, 160, 160)
+  ctx.clip(clip2)
+
+  // Fill the intersection — should be 160x160 (both clips map to same device-space region)
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.fillStyle = 'green'
+  ctx.fillRect(0, 0, 200, 200)
+
+  // Expected: 160x160 green area (both clips cover 0,0 to 160,160 in device space)
+  // Bug: only 80x80 green area (intersection computed in raw coords without transforms)
+  await snapshotImage(t, { canvas, ctx })
+})
+
+// Regression test for https://github.com/Brooooooklyn/canvas/issues/1198
+// Y-flip transform with nested clip (PDF.js use case)
+test('clip-nested-y-flip-transform', async (t) => {
+  const canvas = createCanvas(200, 200)
+  const ctx = canvas.getContext('2d')!
+  ctx.fillStyle = 'white'
+  ctx.fillRect(0, 0, 200, 200)
+
+  // Y-flip transform: maps (0,0)-(200,200) in path coords to full canvas
+  ctx.setTransform(1, 0, 0, -1, 0, 200)
+
+  // First clip covering full canvas in flipped coords
+  const clip1 = new Path2D()
+  clip1.rect(0, 0, 200, 200)
+  ctx.clip(clip1)
+
+  // Second clip at different scale
+  ctx.setTransform(2, 0, 0, 2, 0, 0)
+  const clip2 = new Path2D()
+  clip2.rect(0, 0, 50, 50)
+  ctx.clip(clip2)
+
+  // Reset transform and fill
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.fillStyle = 'blue'
+  ctx.fillRect(0, 0, 200, 200)
+
+  // Expected: 100x100 blue area (clip2 at 2x scale maps to 0,0-100,100 in device space,
+  //           intersected with clip1 which covers full canvas)
+  await snapshotImage(t, { canvas, ctx })
+})
+
+// Regression test for https://github.com/Brooooooklyn/canvas/issues/1198
+// Current path clip (beginPath/rect/clip) also affected, not just Path2D
+test('clip-nested-different-transforms-current-path', async (t) => {
+  const canvas = createCanvas(200, 200)
+  const ctx = canvas.getContext('2d')!
+  ctx.fillStyle = 'white'
+  ctx.fillRect(0, 0, 200, 200)
+
+  // Clip 1 at 2x scale: rect(0,0,80,80) → device space 0,0 to 160,160
+  ctx.setTransform(2, 0, 0, 2, 0, 0)
+  ctx.beginPath()
+  ctx.rect(0, 0, 80, 80)
+  ctx.clip()
+
+  // Clip 2 at identity: rect(0,0,160,160) → device space 0,0 to 160,160
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.beginPath()
+  ctx.rect(0, 0, 160, 160)
+  ctx.clip()
+
+  // Fill the intersection — should be 160x160
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.fillStyle = 'red'
+  ctx.fillRect(0, 0, 200, 200)
+
+  // Expected: 160x160 red area
+  // Bug: only 80x80 red area
+  await snapshotImage(t, { canvas, ctx })
+})
+
 test('closePath', async (t) => {
   const { ctx } = t.context
   ctx.beginPath()

__test__/snapshots/clip-nested-different-transforms-current-path.png

@@ -252,8 +252,7 @@ impl Context {
   }
 
   pub fn clip(&mut self, path: Option<&mut SkPath>, fill_rule: FillType) {
-    // Clone the clip path to avoid borrow conflicts
-    let mut clip_path = match path {
+    let clip_path = match path {
       Some(p) => {
         p.set_fill_type(fill_rule);
         p.clone()
@@ -264,38 +263,30 @@ impl Context {
       }
     };
 
-    // Per Canvas2D spec, multiple clip() calls should intersect with each other.
-    // If there's an existing clip, compute the intersection.
-    let should_update_state = if let Some(ref existing_clip) = self.state.clip_path {
-      // op() returns false if intersection fails (degenerate paths, numerical instability)
-      // If op() fails, clip_path remains unchanged (the new path) while the canvas will
-      // still intersect with its existing clip. To avoid state divergence, we keep the
-      // existing state.clip_path when op() fails, ensuring layer promotion restores correctly.
-      if !clip_path.op(existing_clip, PathOp::Intersect) {
-        #[cfg(debug_assertions)]
-        eprintln!("Warning: Path intersection operation failed in clip()");
-        false // Don't update state - keep existing clip to match canvas behavior
-      } else {
-        true
-      }
-    } else {
-      true // No existing clip, always update state
-    };
+    // For state tracking (used by save/restore and layer promotion), compute the
+    // cumulative clip in device space. Transform the new path by the current CTM
+    // and intersect with the existing device-space clip.
+    let mut device_clip = clip_path.clone();
+    device_clip.transform_self(&self.state.transform);
 
-    // Store the cumulative clip path in state for restoration after layer promotion
-    // Only update if intersection succeeded (or there was no existing clip)
-    // IMPORTANT: We must also skip calling set_clip_path when op() fails to avoid
-    // state divergence. If op() fails, the tracked state keeps OLD while Skia's
-    // clipPath() would compute OLD ∩ NEW. After layer promotion, we'd restore to
-    // OLD instead of OLD ∩ NEW. By skipping both state update AND canvas clip,
-    // we make clip() a no-op when intersection fails, keeping everything consistent.
-    if should_update_state {
-      self.state.clip_path = Some(clip_path.clone());
-      self.sync_clip_to_recorder();
-      self.with_canvas_state(|canvas| {
-        canvas.set_clip_path(&clip_path);
-      });
+    if let Some(ref existing_clip) = self.state.clip_path
+      && !device_clip.op(existing_clip, PathOp::Intersect)
+    {
+      #[cfg(debug_assertions)]
+      eprintln!("Warning: Path intersection operation failed in clip()");
+      // op() failed (degenerate paths). Skip both Skia and state update
+      // to avoid divergence between tracked state and actual canvas clip.
+      return;
     }
+
+    // Pass the raw path to Skia. Skia's clipPath() is cumulative and applies the
+    // current canvas CTM, so it correctly handles nested clips at different transforms.
+    self.with_canvas_state(|canvas| {
+      canvas.set_clip_path(&clip_path);
+    });
+
+    self.state.clip_path = Some(device_clip);
+    self.sync_clip_to_recorder();
   }
 
   pub fn clear_rect(
@@ -388,16 +379,18 @@ impl Context {
       if self.page_recorder.is_some() {
         let transform = self.state.transform.clone();
         let clip = self.state.clip_path.clone();
-        self.with_canvas_state(|canvas| {
-          canvas.set_transform(&transform);
-        });
         // Re-apply clip if the restored state has one.
-        // If restored state has no clip, canvas.restore() already removed it.
+        // The clip is stored in device space, so apply at identity transform first.
         if let Some(ref clip_path) = clip {
           self.with_canvas_state(|canvas| {
+            canvas.reset_transform();
             canvas.set_clip_path(clip_path);
           });
         }
+        // Then restore the actual transform
+        self.with_canvas_state(|canvas| {
+          canvas.set_transform(&transform);
+        });
       }
 
       self.sync_transform_to_recorder();

__test__/snapshots/clip-nested-different-transforms.png

@@ -146,14 +146,15 @@ impl PageRecorder {
         for _ in 0..self.save_count {
           canvas.save();
         }
+        // Restore clip state first (clip is stored in device space, apply at identity)
+        if let Some(ref clip_path) = self.current_clip {
+          canvas.reset_transform();
+          canvas.set_clip_path(clip_path);
+        }
         // Then restore transform state
         if let Some(ref transform) = self.current_transform {
           canvas.set_transform(transform);
         }
-        // Then restore clip state
-        if let Some(ref clip_path) = self.current_clip {
-          canvas.set_clip_path(clip_path);
-        }
       }
       self.changed = false;
     }