[anvishinc]

Fixes #5

Problem

At any display scaling other than 100% (e.g. Windows 125%/150%, or browser zoom), strokes and shapes drawn with the Chrome extension land offset from the cursor. The offset grows with distance from the top-left corner. The web app is unaffected.

Root cause

The drawing canvas in apps/extension/components/Canvas.tsx is styled fixed inset-0, and its backing buffer is sized to innerWidth * devicePixelRatio with a DPR transform on the context. A <canvas> is a replaced element, so inset: 0 doesn't stretch it: with width: auto it renders at its intrinsic size, which is the DPR-scaled buffer. The canvas ends up devicePixelRatio× larger than the viewport, and every stroke is magnified by that factor from the origin.

At 100% scaling DPR is 1, so the bug never showed up there.

Fix

Give the canvas an explicit size so its CSS box always matches the viewport:

- class="fixed inset-0 z-2147483645"
+ class="fixed inset-0 size-full z-2147483645"

AreaMarkup.tsx already sets explicit CSS width/height on its canvas, so it needs no change.

Testing

Built the extension and loaded it in Chromium with --force-device-scale-factor, then dragged a rectangle from (200,200) to (400,300) CSS px and measured the drawn bounds on the canvas:

Scale	Before	After
80%	159,159 → 320,240	199,199 → 400,300
100%	199,199 → 400,300	199,199 → 400,300
125%	248,248 → 501,376	198,198 → 401,301
150%	298,298 → 601,451	199,199 → 401,301