wip picture to board

src/components/CanvasBoard.vue

@@ -196,7 +196,7 @@
       // draw 2d automaton from an uploaded picture.
       // use the picture representation as an initial state
       draw2dPicture() {
-        // get image data by drawing it on a work canvas
+        // draw image on canvas
         this.ctx.fillStyle = "black";
         this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
         this.ctx.drawImage(
@@ -207,6 +207,7 @@
           this.picture.height
         );
 
+        // get image data from canvas
         const imgData = this.ctx.getImageData(
           0,
           0,
@@ -214,10 +215,28 @@
           this.canvasHeight
         );
 
+        // draw the image back on the work canvas with the dimensions of the board
+        this.workCtx.drawImage(
+          this.picture,
+          0,
+          0,
+          this.boardWidth,
+          this.boardHeight
+        );
+
+        // get the resized image data from work canvas
+        const resized = this.workCtx.getImageData(
+          0,
+          0,
+          this.boardWidth,
+          this.boardHeight
+        );
+
         // convert the image into a 2D board of boolean based on pixel value
         this.lastBoard = Object.freeze(
-          picToBoard(imgData.data, this.canvasWidth, this.canvasHeight)
+          picToBoard(resized.data, this.boardWidth, this.boardHeight)
         );
+
         this.toggleStop();
       },
       // stop drawing routines and clear the canvas