Efficient drawing

schaable · schaable · commit 75356723f257 · 2022-07-26T00:49:24.000-03:00
diff --git a/chapter-19/efficient-drawing.html b/chapter-19/efficient-drawing.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<script src="paint.js"></script>
+
+<div></div>
+<script>
+  PictureCanvas.prototype.syncState = function (picture) {
+    if (this.picture == picture) return;
+    const prevPicture = this.picture;
+    this.picture = picture;
+    drawPicture(this.picture, this.dom, scale, prevPicture);
+  };
+
+  function drawPicture(picture, canvas, scale, prevPicture) {
+    if (canvas.width !== picture.width * scale) {
+      canvas.width = picture.width * scale;
+      prevPicture = null;
+    }
+    if (canvas.height !== picture.height * scale) {
+      canvas.height = picture.height * scale;
+      prevPicture = null;
+    }
+    let cx = canvas.getContext('2d');
+
+    for (let y = 0; y < picture.height; y++) {
+      for (let x = 0; x < picture.width; x++) {
+        if (!prevPicture || prevPicture.pixel(x, y) !== picture.pixel(x, y)) {
+          cx.fillStyle = picture.pixel(x, y);
+          cx.fillRect(x * scale, y * scale, scale, scale);
+        }
+      }
+    }
+  }
+
+  document.querySelector('div').appendChild(startPixelEditor({}));
+</script>
