implement rudimetary canvas reading

index.php

@@ -135,7 +135,17 @@
                     document.onmouseup = function() {
                         drawing = false;
                         // write image-bits for posting
-                        bits.value = "101";
+                        let canvasData = canvas.getImageData(0, 0, 128, 64);
+                        bits.value = "";
+
+                        // not best method, ideally want to create an array and then merge
+                        for (let i = 0; i < canvasData.data.length; i += 4) {
+                            if (canvasData.data[i] == 0) {
+                                bits.value += "1";
+                            } else {
+                                bits.value += "0";
+                            }
+                        }
                     }
 
                     canvas.onmousemove = function() {