Fixed bug that caused the fill tool to not work on transparent areas.

js/_fill.js

@@ -6,6 +6,12 @@ function fill(cursorLocation) {
       tempImage.data[pixelPos] = fillColor.r;
       tempImage.data[pixelPos + 1] = fillColor.g;
       tempImage.data[pixelPos + 2] = fillColor.b;
+      tempImage.data[pixelPos + 3] = 255;
+	  /*
+  	tempImage.data[pixelPos] = fillColor.r;
+  	tempImage.data[pixelPos + 1] = fillColor.g;
+  	tempImage.data[pixelPos + 2] = fillColor.b;
+  	*/
   }
   
   //change x y to color value passed from the function and use that as the original color 
@@ -25,7 +31,7 @@ function fill(cursorLocation) {
 	//console.log('filling at '+ Math.floor(cursorLocation[0]/zoom) + ','+ Math.floor(cursorLocation[1]/zoom));
 
 	//temporary image holds the data while we change it
-	var tempImage = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+	var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
 
 	//this is an array that holds all of the pixels at the top of the cluster
 	var topmostPixelsArray = [[Math.floor(cursorLocation[0]/zoom), Math.floor(cursorLocation[1]/zoom)]];
@@ -38,7 +44,7 @@ function fill(cursorLocation) {
 	var clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2]];
 
 	//the new color to fill with
-	var fillColor = hexToRgb(context.fillStyle);
+	var fillColor = hexToRgb(currentLayer.context.fillStyle);
 
 	//if you try to fill with the same color that's already there, exit the function
 	if (clusterColor[0] == fillColor.r &&
@@ -48,7 +54,6 @@ function fill(cursorLocation) {
 
 	//loop until there are no more values left in this array
 	while (topmostPixelsArray.length) {
-		
 		var reachLeft, reachRight;
 
 		//move the most recent pixel from the array and set it as our current working pixels
@@ -63,7 +68,6 @@ function fill(cursorLocation) {
 		//each pixel has 4 values, rgba
 		var pixelPos = (y * canvasSize[0] + x) * 4;
 
-		
 		//move up in the image until you reach the top or the pixel you hit was not the right color
 		while (y-- >= 0 && matchStartColor(tempImage, pixelPos, clusterColor)) {
 			pixelPos -= canvasSize[0] * 4;
@@ -74,7 +78,6 @@ function fill(cursorLocation) {
 		reachRight = false;
 		while (y++ < canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
 			colorPixel(tempImage, pixelPos, fillColor);
-
 			if (x > 0) {
 				if (matchStartColor(tempImage, pixelPos - 4, clusterColor)) {
 					if (!reachLeft) {
@@ -102,6 +105,6 @@ function fill(cursorLocation) {
 			pixelPos += canvasSize[0] * 4;
 		}
 	}
-	context.putImageData(tempImage, 0, 0);
+    currentLayer.context.putImageData(tempImage, 0, 0);
 	//console.log('done filling')
 }

js/_updateCursor.js

@@ -7,8 +7,6 @@ function updateCursor () {
 		brushPreview.style.width = brushSize * zoom + 'px';
 		brushPreview.style.height = brushSize * zoom + 'px';
 	} else if (currentTool == 'eraser' || currentTool == 'resize-eraser') {
-	    // Size management for the eraser
-		console.log("Eraser size: " + eraserSize);
         canvasView.style.cursor = 'crosshair';
         brushPreview.style.display = 'block';
         brushPreview.style.width = eraserSize * zoom + 'px';

js/_variables.js

@@ -13,9 +13,9 @@ var documentCreated = false;
 
 // Checkerboard management
 // Checkerboard color 1
-var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
+var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
 // Checkerboard color 2
-var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
+var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
 // Square size for the checkerboard
 var checkerBoardSquareSize = 16;
 // Checkerboard canvas