Finished implementing pixel grid

Added possibility to hide / show the grid.

js/_pixelGrid.js

@@ -1,7 +1,22 @@
 let pixelGridColor = "#0000FF";
 let lineDistance = 12;
+let pixelGridVisible = false;
 pixelGridCanvas = document.getElementById("pixel-grid");
 
+function togglePixelGrid(event) {
+    let button = document.getElementById("toggle-pixelgrid-button");
+
+    pixelGridVisible = !pixelGridVisible;
+
+    if (pixelGridVisible) {
+        button.innerHTML = "Hide pixel grid";
+        pixelGridCanvas.style.display = "inline-block";
+    }
+    else {
+        button.innerHTML = "Show pixel grid";
+        pixelGridCanvas.style.display = "none";
+    }
+}
 
 function fillPixelGrid() {
     let context = pixelGridCanvas.getContext("2d");
@@ -30,4 +45,8 @@ function fillPixelGrid() {
         context.stroke();
         context.closePath();    
     }
+
+    if (!pixelGridVisible) {
+        pixelGridCanvas.style.display = 'none';
+    }
 }

views/pixel-editor.hbs

@@ -58,6 +58,12 @@
                 <li><button id="redo-button" class="disabled">Redo</button></li>
             </ul>
         </li>
+        <li>
+            <button>View</button>
+            <ul>
+                <li><button id="toggle-pixelgrid-button" onclick="togglePixelGrid()">Show pixel grid</button></li>
+            </ul>
+        </li>
         <li>
             <button id = "layer-button">Layer</button>
             <ul>