Fix QRCodeCanvas blurring when browser is zoomed by detecting devicePixelRatio changes

[Copilot]

The QRCodeCanvas component was not automatically re-rendering when users zoomed the browser page, causing QR codes to appear blurry at different zoom levels. This happened because the component only read window.devicePixelRatio once during initial render and didn't detect subsequent changes.

Changes Made

• Added devicePixelRatio state tracking: QRCodeCanvas now maintains window.devicePixelRatio in component state with SSR-safe initialization
• Added resize event listener: Detects when devicePixelRatio changes (which occurs during browser zoom) and updates the state
• Updated canvas rendering: The canvas drawing effect now uses the state value and includes devicePixelRatio in its dependencies, ensuring automatic re-rendering when zoom changes
• Added comprehensive test: Verifies that the component properly handles devicePixelRatio changes and resize events

How It Works

1. QRCodeCanvas tracks window.devicePixelRatio in component state
2. A resize event listener detects devicePixelRatio changes during zoom
3. State updates trigger canvas re-rendering with correct pixel density
4. QR codes remain sharp at any zoom level

Testing

The implementation has been thoroughly tested:

• All existing tests continue to pass
• New test verifies devicePixelRatio detection and event handling
• Manual testing confirms QR codes stay crisp when zooming
• Canvas correctly scales (e.g., 256px actual size for 128px visual size at 2x pixel ratio)

Screenshots

Before/after zoom testing shows QR codes maintain sharp quality:

Before zoom simulation:

After zoom simulation (2x devicePixelRatio):

The canvas properly scales from 128×128 to 256×256 pixels while maintaining 128px visual size when devicePixelRatio changes from 1 to 2, ensuring crisp rendering.

Fixes #372.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• static.zpao.com
  • Triggering command: node /home/REDACTED/work/qrcode.react/qrcode.react/node_modules/.bin/../jest/bin/jest.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

@zpao 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.