From a115a1ed6b3cd9b1fea8d7e819c65dd6cc946eac Mon Sep 17 00:00:00 2001
From: Chuck <33324927+ChuckBuilds@users.noreply.github.com>
Date: Sun, 5 Oct 2025 10:46:16 -0400
Subject: [PATCH] fix(web): Add willReadFrequently attribute to Canvas2D
 contexts (#100)

- Add willReadFrequently: true to all getContext('2d') calls in templates/index_v2.html
- Fixes Canvas2D performance warning for multiple readback operations using getImageData
- Improves performance for LED matrix preview rendering with frequent pixel sampling
---
 templates/index_v2.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/index_v2.html b/templates/index_v2.html
index f05028f4..d3dc3c5a 100644
--- a/templates/index_v2.html
+++ b/templates/index_v2.html
@@ -2328,7 +2328,7 @@
         function drawGrid(canvas, logicalWidth, logicalHeight, scale) {
             const show = document.getElementById('toggleGrid')?.checked;
             if (!canvas || !show) return;
-            const ctx = canvas.getContext('2d');
+            const ctx = canvas.getContext('2d', { willReadFrequently: true });
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.strokeStyle = 'rgba(255,255,255,0.12)';
             ctx.lineWidth = 1;
@@ -2432,7 +2432,7 @@
             const scale = parseInt(document.getElementById('scaleRange').value || '8');
             const fillPct = parseInt(document.getElementById('dotFillRange').value || '75');
             const dotRadius = Math.max(1, Math.floor((scale * fillPct) / 200)); // radius in px
-            const ctx = ledCanvas.getContext('2d');
+            const ctx = ledCanvas.getContext('2d', { willReadFrequently: true });
             ctx.clearRect(0, 0, ledCanvas.width, ledCanvas.height);
 
             // Clear previous overlay; do not forcibly black-out if sampling fails
@@ -2444,7 +2444,7 @@
             const logicalHeight = Math.floor(ledCanvas.height / scale);
             off.width = logicalWidth;
             off.height = logicalHeight;
-            const offCtx = off.getContext('2d');
+            const offCtx = off.getContext('2d', { willReadFrequently: true });
             // Draw the current image scaled down to logical LEDs to sample colors
             try {
                 offCtx.drawImage(img, 0, 0, logicalWidth, logicalHeight);