SVG viewBox to Canvas device-pixel coordinate mismatch during incremental rect migration

Direct Answer

Use a shared user-space abstraction layer as the primary drift-control strategy. Automated pixel-diff parity checks belong in CI as a validation gate, not as the runtime mechanism that keeps the two renderers aligned.

Why the Abstraction Layer Wins

The core mismatch is that SVG geometry lives in viewBox user units while Canvas draws into a backing store already scaled by devicePixelRatio. A CSS transform on a common ancestor compounds the divergence. Defining every rectangle once in a single logical coordinate system (CSS pixels or viewBox units) and projecting to device pixels once per renderer eliminates per-primitive drift at the source.

Pixel-diff checks only detect symptoms after the fact. They cannot prevent a frame where the SVG rect lands at 10.5 CSS px and the Canvas rect at 10.5 device px because the context scale was applied at the wrong level.

Minimal Implementation Steps

1. Define a pure projection function that takes a logical rectangle {x, y, w, h, strokeWidth} and a Canvas 2D context, then returns device-pixel values for rect(), strokeRect(), and hit-test math:

   function toDeviceCoords(logicalRect, ctx) {
     const t = ctx.getTransform();
     const scale = t.a; // assumes uniform scale
     return {
       x: logicalRect.x * scale,
       y: logicalRect.y * scale,
       w: logicalRect.w * scale,
       h: logicalRect.h * scale,
       strokeWidth: logicalRect.strokeWidth * scale
     };
   }

2. SVG renderer consumes the same logical rect directly; the browser handles viewBox scaling.
3. Stroke parity: disable vector-effect: non-scaling-stroke in SVG unless the design requires it. If non-scaling strokes are required, apply the inverse scale to ctx.lineWidth in Canvas.
4. Hit-testing: convert client coordinates to logical space once (clientToLogical(evt)), then run identical pointInRect(logicalPt, logicalRect) for both renderers. Keep pointer-events on the SVG overlay; give the Canvas layer pointer-events: none.
5. Migration toggle: render SVG first (bottom z-index), Canvas overlay on top. Flip a feature flag per component; the shared abstraction guarantees pixel-perfect overlap when both draw the same logical rect.
6. Responsive recompute: on resize or devicePixelRatio change, recompute the logical-to-device scale factor for both renderers simultaneously.

When This Recommendation Changes

If your container uses non-uniform CSS transforms (skew, anisotropic scale), the simple ctx.getTransform().a stroke compensation breaks. In that case you must either decompose the transform matrix in the projection function or restrict the migration to uniform-scale containers. Which transform profile does your container use?

Verification Checklist (CI Gate)

• Render identical logical rectangles (fractional coords, strokes, transforms) in both SVG and Canvas side-by-side; compute per-pixel difference via canvas.toDataURL() comparison.
• Automate across devicePixelRatio values (1, 1.5, 2, 3) and container CSS scales (0.5, 1, 1.5, 2) using headless Chrome with --force-device-scale-factor.
• Assert zero visual diff (≤1 px edge tolerance) when toggling the feature flag for a single component.
• Simulate pointer events at rectangle edges/corners in logical space; confirm both renderers report identical hit/miss results.