🐛 Batch render into one call, cache the ImageData between renders, scale pixels on big devices

src/Simulation.tsx

@@ -57,11 +57,8 @@ export default function Simulation() {
             const canvas2 = canvas();
             if (!canvas2) return;
 
-
             draw(canvas2, updateState(width(), height()));
-            // setTimeout(() => {
-                window.requestAnimationFrame(frame);
-            // }, 100);
+            window.requestAnimationFrame(frame);
         }
         window.requestAnimationFrame(frame);
 
@@ -84,9 +81,11 @@ export default function Simulation() {
         }
     }
 
+    const downscale = window.devicePixelRatio ** 2 * window.innerWidth * window.innerHeight > 2000000 ? 16 : 8;
+
     return <PixelPerfectTouch
         preventDefault
-        downscale={8}
+        downscale={downscale}
         onMove={onMove}
         onUpdate={setTouchMap}
     >
@@ -96,7 +95,7 @@ export default function Simulation() {
                 height: '100dvh',
                 background: '#202024'
             }}
-            downscale={8}
+            downscale={downscale}
 
             onAttach={setCanvas}
             onDetach={() => setCanvas(undefined)}
@@ -108,16 +107,19 @@ export default function Simulation() {
     </PixelPerfectTouch>;
 }
 
+let imageData: ImageData = undefined as unknown as ImageData;
+
 function draw(canvas: HTMLCanvasElement, state: State) {
     const context = canvas.getContext('2d')!;
     const width = state.width;
     const height = state.height;
 
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
     const buffer = state.get();
 
-    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    if (imageData?.width !== canvas.width || imageData?.height !== canvas.height) {
+        imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    }
+    imageData.data.fill(0);
 
     function set(x: number, y: number, r: number, g: number, b: number, a: number) {
         const offset = (y * canvas.width + x) * 4;