Toggle grid with menu item or Ctrl+G

README.md

@@ -168,7 +168,7 @@ I want to make JS Paint to be able to edit...
 	* [x] The 'Stamp' "Tool" (hold <kbd>Shift</kbd> and click the selection to stamp it)
 	* [x] Image Scaling (<kbd>+</kbd> & <kbd>-</kbd> on the Numpad to scale the selection by factors of 2)
 	* [x] Color Replacement (right mouse button with Eraser to selectively replace the foreground color with the background color)
-	* [ ] The Grid (<kbd>Ctrl+G</kbd> & Zoom to 6x+)
+	* [x] The Grid (<kbd>Ctrl+G</kbd> & Zoom to 4x+)
 	* [x] Quick Undo (Pressing a second mouse button cancels the action you were performing.
 	      I also made it redoable, in case you do it by accident!)
 	* [ ] Scroll Wheel Bug (Hmm, let's maybe not recreate this?)

src/app.js

@@ -38,6 +38,7 @@ var colors = {
 var selection; //the one and only OnCanvasSelection
 var textbox; //the one and only OnCanvasTextBox
 var helper_layer; //the OnCanvasHelperLayer for the grid and tool previews
+var show_grid = false;
 var font = {
 	family: "Arial",
 	size: 12,

src/functions.js

@@ -8,7 +8,7 @@ function update_grid() {
 	if (helper_layer) {
 		helper_layer.destroy();
 	}
-	if (magnification >= 4) {
+	if (magnification >= 4 && show_grid) {
 		var hiDPI = true;
 		helper_layer = new OnCanvasHelperLayer(0, 0, canvas.width, canvas.height, false, hiDPI);
 		var scale = hiDPI ? Math.floor(magnification * window.devicePixelRatio) : 1; // same as in OnCanvasHelperLayer
@@ -27,6 +27,12 @@ function reset_magnification(){
 	set_magnification(1);
 }
 
+function toggle_grid() {
+	show_grid = !show_grid;
+	// $G.trigger("option-changed");
+	update_grid();
+}
+
 function reset_colors(){
 	colors = {
 		foreground: "#000000",

src/menus.js

@@ -285,8 +285,15 @@ var menus = {
 				{
 					item: "Show &Grid",
 					shorcut: "Ctrl+G",
-					enabled: false, // @TODO
-					checkbox: {},
+					enabled: function() {
+						return magnification >= 4;
+					},
+					checkbox: {
+						toggle: toggle_grid,
+						check: function(){
+							return show_grid;
+						},
+					},
 					description: "Shows or hides the grid.",
 				},
 				{