diff --git a/src/app/page.tsx b/src/app/page.tsx index 6c7aff3..92ba765 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -103,7 +103,12 @@ export default function Home(): ReactElement { ref={containerRef} className="glass-surface mx-auto box-content h-0 w-0 rounded-2xl p-5 transition-all" > - <canvas ref={canvasRef} className="h-0 w-0 transition-all"> + <canvas + ref={canvasRef} + width={1} + height={1} + className="h-0 w-0 transition-all" + > Your browser doesn‘t support HTML Canvas. </canvas> </div> diff --git a/src/lib/MazeDrawer.ts b/src/lib/MazeDrawer.ts index f6f4c9d..2be721f 100644 --- a/src/lib/MazeDrawer.ts +++ b/src/lib/MazeDrawer.ts @@ -52,7 +52,7 @@ export default class MazeDrawer { /** The canvas rendering context. */ private visibleCtx: CanvasRenderingContext2D; /** The hidden canvas rendering context for offscreen rendering. */ - private hiddenCtx: OffscreenCanvasRenderingContext2D; + private hiddenCtx: CanvasRenderingContext2D; private sweepAnimations = new Set<AnimationPromise>(); @@ -75,12 +75,10 @@ export default class MazeDrawer { this.visibleCtx = ctx; const hiddenCanvas = document.createElement("canvas"); this.hiddenCtx = match( - hiddenCanvas - .transferControlToOffscreen() - .getContext("2d", { willReadFrequently: true }), + hiddenCanvas.getContext("2d", { willReadFrequently: true }), ) .with(null, () => { - throw new Error("Failed to create offscreen canvas."); + throw new Error("Failed to get hidden canvas context"); }) .otherwise((ctx) => ctx); this.gridSize = initialGridSize; @@ -222,6 +220,7 @@ export default class MazeDrawer { drawnWidth = imageWidth; }, () => drawnWidth === this.width, + 60, ); this.sweepAnimations.add(animation); animation.start(); @@ -416,6 +415,7 @@ export default class MazeDrawer { drawnWidth = drawWidth; }, () => drawnWidth === this.width, + 60, ); this.sweepAnimations.add(animation); animation.start(); @@ -462,6 +462,7 @@ export default class MazeDrawer { drawnWidth = drawWidth2; }, () => drawnWidth === this.width, + 60, ); this.sweepAnimations.add(animation); animation.start();