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

js/_fill.js

@@ -3,9 +3,15 @@ function fill(cursorLocation) {
   //changes a pixels color
   function colorPixel(tempImage, pixelPos, fillColor) {
   	//console.log('colorPixel:',pixelPos);
+      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 
@@ -23,47 +29,45 @@ function fill(cursorLocation) {
   new HistoryStateEditCanvas();
   //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 	//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)]];
 		//console.log('topmostPixelsArray:',topmostPixelsArray)
-	
+
 	//the offset of the pixel in the temp image data to start with
 	var startingPosition = (topmostPixelsArray[0][1] * canvasSize[0] + topmostPixelsArray[0][0]) * 4;
-	
+
 	//the color of the cluster that is being filled
 	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 &&
 		clusterColor[1] == fillColor.g &&
 		clusterColor[2] == fillColor.b )
 	return;
-	
+
 	//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
 		var currentPixel = topmostPixelsArray.pop();
-		
+
 		//set the values of this pixel to x/y variables just for readability
 		var x = currentPixel[0];
 		var y = currentPixel[1];
 
 		//this variable holds the index of where the starting values for the current pixel are in the data array
-		//we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because 
+		//we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because
 		//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