Chrome extension: drawings land offset from the cursor when display scaling isn't 100% #5

Summary

In the Chrome extension, strokes and shapes don't land under the cursor whenever display scaling is anything other than 100% (for example Windows 125% or 150%). The offset grows the further you draw from the top-left corner of the page. At 100% everything works. The web-based marking tool works correctly at any scale.

Steps to reproduce

1. Set the OS display scale to anything other than 100% (e.g. Windows → Settings → System → Display → Scale → 125%).
2. Open any webpage and activate the MarkLayer extension.
3. Pick the Rectangle (R) or Pen (P) tool.
4. Click and drag toward the middle or bottom-right of the page.

Expected behavior

The stroke or shape follows the cursor exactly, as it does at 100% scaling and in the web app.

Actual behavior

The drawing is scaled up from the top-left corner by the display scale factor. At 125%, a drag from (200, 200) to (400, 300) is drawn at about (250, 250) → (500, 375). Near the top-left the offset is small. Further out it gets large enough to make the extension unusable for precise marking.

What I've ruled out

• Other extensions: still happens in Incognito with only MarkLayer enabled.
• The page: the web-based MarkLayer tool works correctly on the same page.
• Scaling: 100% always works. Every other scale tested (80%, 125%, 150%) is offset.

Likely cause

The drawing canvas in apps/extension/components/Canvas.tsx is styled fixed inset-0, and its pixel buffer is sized to innerWidth * devicePixelRatio. A <canvas> doesn't stretch to inset: 0, so it's displayed at its buffer size, which is devicePixelRatio× larger than the viewport. Every stroke is magnified by that factor. Giving the canvas an explicit size (size-full) fixes it. I'll open a PR with the change.

Environment

• OS: Windows 11
• Display scaling: 125% (also reproduced at 80% and 150%)
• Chrome version: 157.0.8103.39
• Extension version: v0.10.1