possible fix for 81

js/dithering.js

@@ -96,7 +96,7 @@ function canvas2bytes(canvas, type = 'bw') {
     for (let y = 0; y < canvas.height; y++) {
       const index = (canvas.width * 4 * y) + x * 4;
       if (type !== 'bwr') {
-        buffer.push(imageData.data[index] > 0 && imageData.data[index + 1] > 0 && imageData.data[index + 2] > 0 ? 1 : 0);
+        buffer.push(imageData.data[index] > 0 && imageData.data[index + 1] === 0 && imageData.data[index + 2] === 0 ? 1 : 0);
       } else {
         buffer.push(imageData.data[index] > 0 && imageData.data[index + 1] === 0 && imageData.data[index + 2] === 0 ? 1 : 0);
       }
@@ -111,7 +111,7 @@ function canvas2bytes(canvas, type = 'bw') {
 }
 
 function getColorDistance(rgba1, rgba2) {
-  const [r1, b1, g1] = rgba1;
+  const [r1, g1, b1] = rgba1;
   const [r2, b2, g2] = rgba2;
 
   const rm = (r1 + r2) / 2;
@@ -207,5 +207,10 @@ function ditheringCanvasByPalette(canvas, palette, type) {
       updatePixelErr(imageData.data, currentPixel + 8 * w, err, 1);
     }
   }
+
+  ctx.putImageData(imageData, 0, 0);
+}elErr(imageData.data, currentPixel + 8 * w, err, 1);
+    }
+  }
   ctx.putImageData(imageData, 0, 0);
 }

js/script.js

@@ -582,8 +582,10 @@ function listToImageHorizontal(list, canvas) {
   // we want to scale / invert, etc.
   ctx.putImageData(imgData, 0, 0);
   const img = new Image();
+  img.onload = () => {
+    images.first().img = img;
+  };
   img.src = canvas.toDataURL('image/png');
-  images.first().img = img;
 }
 
 // Quick and effective way to draw single pixels onto the canvas
@@ -644,8 +646,10 @@ function listToImageVertical(list, canvas) {
   // Save the canvas contents inside the img object. This way we can
   // reuse the img object when we want to scale / invert, etc.
   const img = new Image();
+  img.onload = () => {
+    images.first().img = img;
+  };
   img.src = canvas.toDataURL('image/png');
-  images.first().img = img;
 }
 
 // Handle inserting an image by pasting code
@@ -665,7 +669,7 @@ function handleTextInput(drawMode) {
   canvasContainer.appendChild(canvas);
 
   const image = new Image();
-  images.setByIndex(0, { img: image, canvas });
+  images.setByIndex(0, { img: image, canvas, ctx: canvas.getContext('2d') });
 
   let input = document.getElementById('byte-input').value;