rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-04-10 21:03:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): Add willReadFrequently attribute to Canvas2D contexts (#100)

Browse Source 
- 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
This commit is contained in:
Chuck
2025-10-05 10:46:16 -04:00
committed by GitHub
parent d83ff6a121
commit a115a1ed6b
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/index_v2.html
View File

@@ -2328,7 +2328,7 @@
function drawGrid(canvas, logicalWidth, logicalHeight, scale) { function drawGrid(canvas, logicalWidth, logicalHeight, scale) {
const show = document.getElementById('toggleGrid')?.checked; const show = document.getElementById('toggleGrid')?.checked;
if (!canvas || !show) return; 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.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.strokeStyle = 'rgba(255,255,255,0.12)';
ctx.lineWidth = 1; ctx.lineWidth = 1;
@@ -2432,7 +2432,7 @@
const scale = parseInt(document.getElementById('scaleRange').value || '8'); const scale = parseInt(document.getElementById('scaleRange').value || '8');
const fillPct = parseInt(document.getElementById('dotFillRange').value || '75'); const fillPct = parseInt(document.getElementById('dotFillRange').value || '75');
const dotRadius = Math.max(1, Math.floor((scale * fillPct) / 200)); // radius in px 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); ctx.clearRect(0, 0, ledCanvas.width, ledCanvas.height);
// Clear previous overlay; do not forcibly black-out if sampling fails // Clear previous overlay; do not forcibly black-out if sampling fails
@@ -2444,7 +2444,7 @@
const logicalHeight = Math.floor(ledCanvas.height / scale); const logicalHeight = Math.floor(ledCanvas.height / scale);
off.width = logicalWidth; off.width = logicalWidth;
off.height = logicalHeight; 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 // Draw the current image scaled down to logical LEDs to sample colors
try { try {
offCtx.drawImage(img, 0, 0, logicalWidth, logicalHeight); offCtx.drawImage(img, 0, 0, logicalWidth, logicalHeight);