From 0c6803754addad37180790b1baf92d8b332011be Mon Sep 17 00:00:00 2001 From: Vidya Rupak Date: Tue, 23 Dec 2025 14:45:22 -0700 Subject: [PATCH] fix canvas dimension exceed by clamping the canvas size to safe limits --- .../src/components/graph-canvas.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/memory-graph/src/components/graph-canvas.tsx b/packages/memory-graph/src/components/graph-canvas.tsx index 05b5b156..cae74c84 100644 --- a/packages/memory-graph/src/components/graph-canvas.tsx +++ b/packages/memory-graph/src/components/graph-canvas.tsx @@ -957,14 +957,24 @@ export const GraphCanvas = memo( const canvas = canvasRef.current if (!canvas) return - // upscale backing store + // Maximum safe canvas size (most browsers support up to 16384px) + const MAX_CANVAS_SIZE = 16384 + + // Calculate effective DPR that keeps us within safe limits + const maxDpr = Math.min( + MAX_CANVAS_SIZE / width, + MAX_CANVAS_SIZE / height, + dpr + ) + + // upscale backing store with clamped dimensions canvas.style.width = `${width}px` canvas.style.height = `${height}px` - canvas.width = width * dpr - canvas.height = height * dpr + canvas.width = Math.min(width * maxDpr, MAX_CANVAS_SIZE) + canvas.height = Math.min(height * maxDpr, MAX_CANVAS_SIZE) const ctx = canvas.getContext("2d") - ctx?.scale(dpr, dpr) + ctx?.scale(maxDpr, maxDpr) }, [width, height, dpr]) // -----------------------------------------------------------------------