From ca1af08d87a097a677d0a66b60d0ed71296a35d2 Mon Sep 17 00:00:00 2001
From: Jason Frey <fryguy9@gmail.com>
Date: Sun, 1 Oct 2023 20:48:01 -0400
Subject: [PATCH] Use a faster rendering method

This method writes all of the color data into an ImageData object in the
background, then one-shot writes that into the canvas while also
leveraging the built-in scaling of the canvas.
---
 src/webview.ts | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/webview.ts b/src/webview.ts
index dae2442..a679ae8 100644
--- a/src/webview.ts
+++ b/src/webview.ts
@@ -84,16 +84,34 @@ const generateHTMLCanvas = (
 
           function scaleCanvas(targetCanvas, scale) {
             const { colorData, width, height } = message;
-            let ctx = targetCanvas.getContext('2d');
-            targetCanvas.width = width * scale;
-            targetCanvas.height = height * scale;
-            for (let x = 0; x < width; x++){
-              for (let y = 0; y < height; y++){
-                let color = colorData[(y * width) + x];
-                ctx.fillStyle = "rgba(" + color.r + "," + color.g + "," + color.b + "," + 1.0 + ")";
-                ctx.fillRect(x * scale, y * scale, scale, scale);
+
+            // Write the colorData to an ImageData object
+            const data = new Uint8ClampedArray(width * height * 4);
+            for (let row = 0; row < height; row++) {
+              for (let col = 0; col < width; col++) {
+                let color = colorData[row * width + col];
+                let i = row * 4 * width + col * 4;
+                data[i + 0] = color.r;
+                data[i + 1] = color.g;
+                data[i + 2] = color.b;
+                data[i + 3] = 255;
               }
             }
+            const id = new ImageData(data, width, height);
+
+            // Write the ImageData to a background canvas
+            const backCanvas = document.createElement('canvas');
+            backCanvas.width = id.width;
+            backCanvas.height = id.height;
+            backCanvas.getContext('2d').putImageData(id, 0, 0);
+
+            // Scale the target canvas and write the background canvas to it
+            const ctx = targetCanvas.getContext('2d');
+            targetCanvas.width = width * scale;
+            targetCanvas.height = height * scale;
+            ctx.scale(scale, scale);
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(backCanvas, 0, 0);
           }
 
           function showImg(scale) {