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

Coordinate space divergence

Migrating a graphics layer from SVG <rect> to Canvas rect() without downtime requires running both renderers in parallel during transition. SVG rectangles express geometry in user units defined by the viewBox, while Canvas operations target drawing-buffer pixels that already incorporate devicePixelRatio. When a parent container applies a CSS transform or the viewBox scales the SVG viewport, the two coordinate systems diverge: an SVG x="10.5" maps to a different physical position than a Canvas x=10.5 after the context scales for high-DPI displays.

Stroke and hit-testing parity

Stroke rendering adds another dimension of drift. SVG stroke-width scales with the current transform unless vector-effect: non-scaling-stroke is set, whereas Canvas lineWidth remains in device pixels unless the context transform is explicitly compensated. Hit-testing behaves differently as well: SVG exposes pointer-events declaratively, while Canvas demands manual point-in-rectangle checks against transformed coordinates.

Which strategy minimizes visual drift during the overlap period: a shared user-space abstraction layer that both renderers consume, or per-component dual rendering with automated pixel-diff parity checks?