From 6be118377f87535f6147e12e4114a7e790634070 Mon Sep 17 00:00:00 2001 From: Lucas Santos Date: Wed, 6 May 2026 14:39:05 -0300 Subject: [PATCH 1/2] fix: only draw if there's progress inside the canvas --- src/website/hooks/BR/canvas.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/website/hooks/BR/canvas.ts b/src/website/hooks/BR/canvas.ts index fec8c66..cfbe77e 100644 --- a/src/website/hooks/BR/canvas.ts +++ b/src/website/hooks/BR/canvas.ts @@ -51,13 +51,13 @@ export const draw = ( if (result.progress > 0) { visibleCount++; + drawSquare(context, dotState.dot, result.progress, scale); + const isStableVisible = result.visible && result.disappearAt === null; if (isStableVisible) { visibleIndices.push(dotIndex); } } - - drawSquare(context, dotState.dot, result.progress, scale); } processRemovals(state, visibleIndices, visibleCount, elapsed); From a6dd4f2853e11e9eb938021a2c4fd600bdacb8c9 Mon Sep 17 00:00:00 2001 From: Lucas Santos Date: Wed, 6 May 2026 14:53:54 -0300 Subject: [PATCH 2/2] fix(BR): reduce GPU usage in dot canvas animation Skip drawing dots with zero progress, replace roundRect with fillRect to eliminate complex path rasterization, and drop devicePixelRatio scaling to avoid allocating an oversized canvas texture on Retina displays. --- src/website/hooks/BR/canvas.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/website/hooks/BR/canvas.ts b/src/website/hooks/BR/canvas.ts index cfbe77e..e4d7ff0 100644 --- a/src/website/hooks/BR/canvas.ts +++ b/src/website/hooks/BR/canvas.ts @@ -16,12 +16,9 @@ const drawSquare = ( const size = dot.radius * 2 * scale; const x = dot.centerX * scale - size / 2; const y = dot.centerY * scale - size / 2; - const borderRadius = size * 0.2; context.fillStyle = color; - context.beginPath(); - context.roundRect(x, y, size, size, borderRadius); - context.fill(); + context.fillRect(x, y, size, size); }; export const draw = ( @@ -71,9 +68,8 @@ export const updateCanvasSize = ( const rect = canvas.getBoundingClientRect(); if (rect.width === 0 || rect.height === 0) return; - const devicePixelRatio = window.devicePixelRatio || 1; - canvas.width = rect.width * devicePixelRatio; - canvas.height = rect.height * devicePixelRatio; + canvas.width = rect.width; + canvas.height = rect.height; const context = canvas.getContext('2d'); if (context) {