From a9d380ec1d5d37bc4795493c7f3afacb9be33a71 Mon Sep 17 00:00:00 2001
From: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
Date: Sun, 31 Mar 2019 16:32:49 +0200
Subject: [PATCH] Implemented eraser tool. Must move and resize layers at the
 same time.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
---
 README.md                 |  6 +++---
 css/pixel-editor.scss     |  4 ++--
 js/_canvas.js             |  1 +
 js/_checkerboard.js       |  2 ++
 js/_clickedColor.js       |  2 +-
 js/_createColorPalette.js |  6 +++---
 js/_deleteColor.js        |  2 +-
 js/_drawLine.js           |  4 ++--
 js/_history.js            | 30 +++++++++++++-------------
 js/_jscolor.js            | 18 ++++++++--------
 js/_loadImage.js          |  4 ++--
 js/_mouseEvents.js        | 44 +++++++++++++++++++--------------------
 js/_newPixel.js           | 15 +++++++------
 js/_replaceAllOfColor.js  |  4 ++--
 js/_updateCursor.js       |  2 +-
 js/_variables.js          |  9 ++++++--
 views/pixel-editor.hbs    |  1 +
 17 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/README.md b/README.md
index d243e2e..680b966 100644
--- a/README.md
+++ b/README.md
@@ -21,9 +21,9 @@ Suggestions / Planned features:
 
 - Selections 
     - New selection tool 
-    - New canvas layer above the drawing layer 
+    - New currentLayer.canvas layer above the drawing layer 
     - Move when click and drag 
-    - Merge with canvas when click outside 
+    - Merge with currentLayer.canvas when click outside 
 
 - Copy/paste 
     - Add as selection 
@@ -35,7 +35,7 @@ Suggestions / Planned features:
 
 - Palette option remove unused colors 
 - Pixel Grid 
-    - Another canvas 
+    - Another currentLayer.canvas 
     - Must be rescaled each zoom 
 
 - Possibly add collaborate function using together.js 
diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index 10a8c76..a8cce52 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -54,11 +54,11 @@ canvas {
 }
 
 #checkerboard {
-  z-index:1000;
+  z-index:1;
 }
 
 #pixel-canvas {
-  z-index:1;
+  z-index:2;
   background:transparent;
 }
 
diff --git a/js/_canvas.js b/js/_canvas.js
index cd39dd4..b9cb556 100644
--- a/js/_canvas.js
+++ b/js/_canvas.js
@@ -1,6 +1,7 @@
 function Canvas(width, height, canvas) {
     this.canvasSize = [width, height],
     this.canvas = canvas,
+    this.context = canvas.getContext("2d"),
     this.initialize = function() {
         var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
         var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
diff --git a/js/_checkerboard.js b/js/_checkerboard.js
index 97435cd..2deaef9 100644
--- a/js/_checkerboard.js
+++ b/js/_checkerboard.js
@@ -6,6 +6,8 @@ var nSquaresFilled = 0;
  */
 
 function fillCheckerboard() {
+    var context = checkerBoard.context;
+
     for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
         nSquaresFilled = 0;
 
diff --git a/js/_clickedColor.js b/js/_clickedColor.js
index ad5b054..835a821 100644
--- a/js/_clickedColor.js
+++ b/js/_clickedColor.js
@@ -9,7 +9,7 @@ function clickedColor (e){
       if (selectedColor) selectedColor.classList.remove("selected");
 
     	//set current color
-    	context.fillStyle = this.style.backgroundColor;
+    	currentLayer.context.fillStyle = this.style.backgroundColor;
     	
     	//make color selected
     	e.target.parentElement.classList.add('selected');
diff --git a/js/_createColorPalette.js b/js/_createColorPalette.js
index 8f93bc8..e214b63 100644
--- a/js/_createColorPalette.js
+++ b/js/_createColorPalette.js
@@ -36,10 +36,10 @@ function createColorPalette(selectedPalette, fillBackground) {
 	
 	//fill bg with lightest color
 	if (fillBackground) {
-		context.fillStyle = lightestColor;
-		context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
+		currentLayer.context.fillStyle = lightestColor;
+		currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
 	}
 	
 	//set as current color
-	context.fillStyle = darkestColor;
+	currentLayer.context.fillStyle = darkestColor;
 }
\ No newline at end of file
diff --git a/js/_deleteColor.js b/js/_deleteColor.js
index 57283a7..fac8214 100644
--- a/js/_deleteColor.js
+++ b/js/_deleteColor.js
@@ -73,7 +73,7 @@ function deleteColor (color) {
     
     //set current color TO LIGHTEST COLOR
     lightestColor[1].parentElement.classList.add('selected');
-    context.fillStyle = '#'+lightestColor[1].jscolor.toString();
+    currentLayer.context.fillStyle = '#'+lightestColor[1].jscolor.toString();
   }
   
   //delete the element
diff --git a/js/_drawLine.js b/js/_drawLine.js
index 1721dd0..934246d 100644
--- a/js/_drawLine.js
+++ b/js/_drawLine.js
@@ -10,9 +10,9 @@ function line(x0,y0,x1,y1) {
 	while (true) {
 	    //set pixel
 		if (currentTool == 'pencil') {
-			context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+			currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
 		} else if (currentTool == 'eraser') {
-            context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+            currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), eraserSize, eraserSize);
 		}
 		
 		//if we've reached the end goal, exit the loop
diff --git a/js/_history.js b/js/_history.js
index 667bb5a..db20302 100644
--- a/js/_history.js
+++ b/js/_history.js
@@ -5,19 +5,19 @@ const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
 //prototype for undoing canvas changes
 function HistoryStateEditCanvas () {
-  this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+  this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
   
   this.undo = function () {
-    var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-    context.putImageData(this.canvas, 0, 0);
+    var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+    currentLayer.context.putImageData(this.canvas, 0, 0);
     
     this.canvas = currentCanvas;
     redoStates.push(this);
   }
   
   this.redo = function () {
-    var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-    context.putImageData(this.canvas, 0, 0);
+    var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+    currentLayer.context.putImageData(this.canvas, 0, 0);
     
     this.canvas = currentCanvas;
     undoStates.push(this);
@@ -48,11 +48,11 @@ function HistoryStateAddColor (colorValue) {
 //prototype for undoing deleted colors
 function HistoryStateDeleteColor (colorValue) {
   this.colorValue = colorValue;
-  this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+  this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
   
   this.undo = function () {
-    var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-    context.putImageData(this.canvas, 0, 0);
+    var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+    currentLayer.context.putImageData(this.canvas, 0, 0);
     
     addColor(this.colorValue);
     
@@ -61,8 +61,8 @@ function HistoryStateDeleteColor (colorValue) {
   }
   
   this.redo = function () {
-    var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-    context.putImageData(this.canvas, 0, 0);
+    var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+    currentLayer.context.putImageData(this.canvas, 0, 0);
     
     deleteColor(this.colorValue);
   
@@ -78,11 +78,11 @@ function HistoryStateDeleteColor (colorValue) {
 function HistoryStateEditColor (newColorValue, oldColorValue) {
   this.newColorValue = newColorValue;
   this.oldColorValue = oldColorValue;
-  this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+  this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
   
   this.undo = function () {
-    var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-    context.putImageData(this.canvas, 0, 0);
+    var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+    currentLayer.context.putImageData(this.canvas, 0, 0);
     
     //find new color in palette and change it back to old color
     var colors = document.getElementsByClassName('color-button');
@@ -99,8 +99,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
   }
   
   this.redo = function () {
-    var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-    context.putImageData(this.canvas, 0, 0);
+    var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+    currentLayer.context.putImageData(this.canvas, 0, 0);
     
     //find old color in palette and change it back to new color
     var colors = document.getElementsByClassName('color-button');
diff --git a/js/_jscolor.js b/js/_jscolor.js
index 2fad864..16a89ae 100644
--- a/js/_jscolor.js
+++ b/js/_jscolor.js
@@ -547,7 +547,7 @@ var jsc = {
 				//console.log(e.target,'=====================================')
 				//if they clicked on the delete button [lospec]
 				if (e.target.className == 'delete-color-button') {
-				  //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
+				  //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 				  new HistoryStateDeleteColor(jsc.picker.owner.toString());
 				  
 				  deleteColor(jsc.picker.owner.styleElement);
@@ -784,15 +784,15 @@ var jsc = {
 			// Canvas implementation for modern browsers
 
 			var canvas = document.createElement('canvas');
-			var ctx = canvas.getContext('2d');
+			var ctx = currentLayer.canvas.getContext('2d');
 
 			var drawFunc = function (width, height, type) {
-				canvas.width = width;
-				canvas.height = height;
+				currentLayer.canvas.width = width;
+				currentLayer.canvas.height = height;
 
-				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.clearRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
 
-				var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
+				var hGrad = ctx.createLinearGradient(0, 0, currentLayer.canvas.width, 0);
 				hGrad.addColorStop(0 / 6, '#F00');
 				hGrad.addColorStop(1 / 6, '#FF0');
 				hGrad.addColorStop(2 / 6, '#0F0');
@@ -802,9 +802,9 @@ var jsc = {
 				hGrad.addColorStop(6 / 6, '#F00');
 
 				ctx.fillStyle = hGrad;
-				ctx.fillRect(0, 0, canvas.width, canvas.height);
+				ctx.fillRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
 
-				var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
+				var vGrad = ctx.createLinearGradient(0, 0, 0, currentLayer.canvas.height);
 				switch (type.toLowerCase()) {
 				case 's':
 					vGrad.addColorStop(0, 'rgba(255,255,255,0)');
@@ -816,7 +816,7 @@ var jsc = {
 					break;
 				}
 				ctx.fillStyle = vGrad;
-				ctx.fillRect(0, 0, canvas.width, canvas.height);
+				ctx.fillRect(0, 0, currentLayer.canvas.width, canvas.height);
 			};
 
 			paletteObj.elm = canvas;
diff --git a/js/_loadImage.js b/js/_loadImage.js
index 2867307..8ba192b 100644
--- a/js/_loadImage.js
+++ b/js/_loadImage.js
@@ -15,10 +15,10 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
 					newPixel(this.width, this.height, []);
 					
 					//draw the image onto the canvas
-					context.drawImage(img, 0, 0);
+					currentLayer.context.drawImage(img, 0, 0);
 					
 					var colorPalette = {};
-					var imagePixelData = context.getImageData(0,0,this.width, this.height).data;
+					var imagePixelData = currentLayer.context.getImageData(0,0,this.width, this.height).data;
 					
 					var imagePixelDataLength = imagePixelData.length;
 					
diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js
index a485a31..50c0454 100644
--- a/js/_mouseEvents.js
+++ b/js/_mouseEvents.js
@@ -17,7 +17,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 			currentTool = 'pan';
 		else if (mouseEvent.altKey) 
 			currentTool = 'eyedropper';
-		else if (mouseEvent.target == canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
+		else if (mouseEvent.target == currentLayer.canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
 		    new HistoryStateEditCanvas();
 		    //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 		
@@ -31,7 +31,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	}
 	// TODO add eraser resize for scroll wheel
 	
-	if (currentTool == 'eyedropper' && mouseEvent.target == canvas)
+	if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas)
 	    eyedropperPreview.style.display = 'block';
 	
 	return false;
@@ -46,7 +46,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	
 	if (!documentCreated || dialogueOpen) return;
 	
-	if (currentTool == 'eyedropper' && mouseEvent.target == canvas) {
+	if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas) {
 		var cursorLocation = getCursorPosition(mouseEvent);
 		var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
 		var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
@@ -78,10 +78,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
 		
 		
 	}
-	else if (currentTool == 'fill' && mouseEvent.target == canvas) {
+	else if (currentTool == 'fill' && mouseEvent.target == currentLayer.canvas) {
 	  console.log('filling')
 	  //if you clicked on anything but the canvas, do nothing
-		if (!mouseEvent.target == canvas) return;
+		if (!mouseEvent.target == currentLayer.canvas) return;
 		
 		//get cursor postion
 		var cursorLocation = getCursorPosition(mouseEvent);
@@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
     //fill starting at the location
 		fill(cursorLocation);
 	}
-	else if (currentTool == 'zoom' && mouseEvent.target == canvas) {
+	else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
 		if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
 		else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
 	}
@@ -121,18 +121,18 @@ function draw (mouseEvent) {
 	if (currentTool == 'pencil') {
 	
 		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
-		brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
+		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
+		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
 		
 		//hide brush preview outside of canvas / canvas view
-		if (mouseEvent.target == canvas || mouseEvent.target == canvasView)
+		if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
 		  brushPreview.style.visibility = 'visible';
 		else
 		  brushPreview.style.visibility = 'hidden';
 
 		//draw line to current pixel
 		if (dragging) {
-			if (mouseEvent.target == canvas || mouseEvent.target == canvasView) {
+			if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
 				line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
 				lastPos = cursorLocation;
 			}
@@ -153,14 +153,14 @@ function draw (mouseEvent) {
         brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
 
         //hide brush preview outside of canvas / canvas view
-        if (mouseEvent.target == canvas || mouseEvent.target == canvasView)
+        if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
             brushPreview.style.visibility = 'visible';
         else
             brushPreview.style.visibility = 'hidden';
 
         //draw line to current pixel
         if (dragging) {
-            if (mouseEvent.target == canvas || mouseEvent.target == canvasView) {
+            if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
                 line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
                 lastPos = cursorLocation;
             }
@@ -169,30 +169,30 @@ function draw (mouseEvent) {
 	else if (currentTool == 'pan' && dragging) {
 
 		
-		setCanvasOffset(canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
+		setCanvasOffset(currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
 		/*
 		if 	(
 			//right
-			canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - canvasSize[0]*zoom*0.25 - 48 &&
+			currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - currentLayer.canvasSize[0]*zoom*0.25 - 48 &&
 			//left
-			canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64) 
+			currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
 				canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
 			
 		if (
 			//bottom
 			canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
 			//top
-			canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48) 
-				canvas.style.top = canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
+			currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
+				currentLayer.canvas.style.top = currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
     	*/
     }
-    else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == canvas) {
+    else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
         var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
         eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
         eyedropperPreview.style.display = 'block';
        
-        eyedropperPreview.style.left = cursorLocation[0] + canvas.offsetLeft - 30 + 'px';
-        eyedropperPreview.style.top = cursorLocation[1] + canvas.offsetTop - 30 + 'px';
+        eyedropperPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
+        eyedropperPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - 30 + 'px';
         
         var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
         
@@ -213,8 +213,8 @@ function draw (mouseEvent) {
 		brushSize = Math.max(1,newBrushSize);
 		
 		//fix offset so the cursor stays centered
-		brushPreview.style.left = lastPos[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
-		brushPreview.style.top = lastPos[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
+		brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
+		brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
 
 		updateCursor();
 	}
diff --git a/js/_newPixel.js b/js/_newPixel.js
index 4177b37..0fc6f5e 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -1,9 +1,12 @@
 
 function newPixel (width, height, palette) {
-	var main = new Canvas(width, height, canvas);
-	main.initialize();
+    currentLayer = new Canvas(width, height, canvas);
+    currentLayer.initialize();
 
-	canvasSize = main.canvasSize;
+    checkerBoard = new Canvas(width, height, checkerBoard);
+    checkerBoard.initialize();
+
+	canvasSize = currentLayer.canvasSize;
 	//remove current palette
 	colors = document.getElementsByClassName('color-button');
 	while (colors.length > 0) {
@@ -40,14 +43,14 @@ function newPixel (width, height, palette) {
     //fill background of canvas with bg color
 		fillCheckerboard();
 		/*
-		context.fillStyle = '#'+defaultBackgroundColor;
-		context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
+		currentLayer.context.fillStyle = '#'+defaultBackgroundColor;
+		currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
 		
 		console.log('#'+defaultBackgroundColor)
 		*/
 		
 		//set current drawing color as foreground color
-		context.fillStyle = '#'+defaultForegroundColor;
+		currentLayer.context.fillStyle = '#'+defaultForegroundColor;
 		selectedPalette = 'none';
 	}
 		
diff --git a/js/_replaceAllOfColor.js b/js/_replaceAllOfColor.js
index d7c9f3a..b6c7b6d 100644
--- a/js/_replaceAllOfColor.js
+++ b/js/_replaceAllOfColor.js
@@ -7,7 +7,7 @@ function replaceAllOfColor (oldColor, newColor) {
   if (typeof newColor === 'string') newColor = hexToRgb(newColor);
     
   //create temporary image from canvas to search through
-	var tempImage = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+	var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
 	
 	//loop through all pixels
 	for (var i=0;i<tempImage.data.length;i+=4) {
@@ -21,5 +21,5 @@ function replaceAllOfColor (oldColor, newColor) {
 	}
 	
 	//put temp image back onto canvas
-	context.putImageData(tempImage,0,0);
+	currentLayer.context.putImageData(tempImage,0,0);
 }
\ No newline at end of file
diff --git a/js/_updateCursor.js b/js/_updateCursor.js
index 587fc17..64857b7 100644
--- a/js/_updateCursor.js
+++ b/js/_updateCursor.js
@@ -12,7 +12,7 @@ function updateCursor () {
         brushPreview.style.display = 'block';
         brushPreview.style.width = eraserSize * zoom + 'px';
         brushPreview.style.height = eraserSize * zoom + 'px';
-        context.fillStyle = 'rgba(255, 0, 0, 0)';
+        currentLayer.context.fillStyle = 'rgba(255, 0, 0, 0)';
 	} else
 		brushPreview.style.display = 'none';
 	
diff --git a/js/_variables.js b/js/_variables.js
index beadf57..538384e 100644
--- a/js/_variables.js
+++ b/js/_variables.js
@@ -12,13 +12,12 @@ var prevEraserSize = 1;
 var menuOpen = false;
 var dialogueOpen = false;
 var documentCreated = false;
-var layers = 
 
 // Checkerboard management
 var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
 var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
 var checkerBoardSquareSize = 16;
-//var checkerBoard = document.getElementById("checkerboard").getContext("2d");
+var checkerBoard = document.getElementById("checkerboard");
 
 //common elements
 var brushPreview = document.getElementById("brush-preview");
@@ -32,3 +31,9 @@ var popUpContainer = document.getElementById("pop-up-container");
 var canvas = document.getElementById("pixel-canvas");
 var context = canvas.getContext("2d");
 
+// Layers
+var layers = [];
+var currentLayer;
+
+//TODO all layers must be moved and resized at the same time
+
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index f2fc012..3175b91 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -99,6 +99,7 @@
 
     <div id="canvas-view">
         <canvas id="pixel-canvas"></canvas>
+        <canvas id="checkerboard"></canvas>
     </div>
     <div id="canvas-view-shadow"></div>