Fixed new pixel creation bug and preview canvas blurriness

It's now possible to create a new project of a different size from the one decided when opening the app. Also fixed a bug that made the layer preview canvases blurry. They're now pixel perfect.

css/pixel-editor.scss

@@ -22,6 +22,17 @@ body {
   /* Disable Android and iOS callouts*/
 }
 
+.preview-canvas {
+  image-rendering:optimizeSpeed;             /* Legal fallback */
+  image-rendering:-moz-crisp-edges;          /* Firefox        */
+  image-rendering:-o-crisp-edges;            /* Opera          */
+  image-rendering:-webkit-optimize-contrast; /* Safari         */
+  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
+  image-rendering:crisp-edges;               /* CSS4 Proposed  */
+  image-rendering:pixelated;                 /* CSS4 Proposed  */
+  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
+}
+
 #layers-menu {
   width:200px;
   top: 48px;

js/_checkerboard.js

@@ -8,6 +8,10 @@ var nSquaresFilled = 0;
 function fillCheckerboard() {
     // Getting checkerboard context
     var context = checkerBoard.context;
+    context.clearRect(0, 0, canvasSize[0], canvasSize[1]);
+
+    console.log(canvasSize);
+    console.log(checkerBoardSquareSize);
 
     // Cycling through the canvas (using it as a matrix)
     for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {

js/_layer.js

@@ -118,9 +118,6 @@ class Layer {
 
         if (menuEntry != null) {
             menuEntry.id = "layer" + id;
-        }
-
-        if (menuEntry != null) {
             menuEntry.onclick = () => this.select();
             menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
             menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
@@ -130,6 +127,8 @@ class Layer {
             menuEntry.addEventListener("dragover", this.layerDragOver, false);
             menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
             menuEntry.addEventListener("dragend", this.layerDragEnd, false);
+
+            menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
         }
 
         this.initialize();

js/_newPixel.js

@@ -5,23 +5,50 @@ function newPixel (width, height, palette) {
 		layerList = document.getElementById("layers-menu");
 		layerListEntry = layerList.firstElementChild;
 
-		firstPixel = false;
+		// Setting up the current layer
+	    currentLayer = new Layer(width, height, canvas, layerListEntry);
+	    canvas.style.zIndex = 2;
 	}
 	else {
+		let nLayers = layers.length;
+		for (let i=2; i < layers.length - 2; i++) {
+			let currentEntry = layers[i].menuEntry;
+			let associatedLayer;
+
+			if (currentEntry != null) {
+				// Getting the associated layer
+				associatedLayer = getLayerByID(currentEntry.id);
+
+				// Deleting its canvas
+				associatedLayer.canvas.remove();
+
+				// Adding the id to the unused ones
+				unusedIDs.push(currentEntry.id);
+				// Removing the entry from the menu
+				currentEntry.remove();
+			}
+		}
+
+		// Removing the old layers from the list
+		for (let i=2; i<nLayers - 2; i++) {
+			layers.splice(2, 1);
+		}
+
+		// Setting up the current layer
+	    layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
+	    currentLayer = layers[1];
+	    layerCount = 1;
+
+	    canvas = currentLayer.canvas;
+	    context = currentLayer.context;
+	    canvas.style.zIndex = 2;
+
 		// TODO: clean layers before creating a new pixel
 		// Devo togliere tutte le entries tranne la prima
 		// Devo pulire la preview della prima entry
 		// Devo cancellare tutte le tele tranne quella con id pixel-canvas
 	}
 
-    // Setting up the current layer
-    currentLayer = new Layer(width, height, canvas, layerListEntry);
-    canvas.style.zIndex = 2;
-
-    // Cloning the entry so that when I change something on the first layer, those changes aren't 
-    // propagated to the other ones
-    layerListEntry = layerListEntry.cloneNode(true);
-
     // Adding the checkerboard behind it
     checkerBoard = new Layer(width, height, checkerBoardCanvas);
 
@@ -33,11 +60,16 @@ function newPixel (width, height, palette) {
 
 	canvasSize = currentLayer.canvasSize;
 
-	// Adding the first layer and the checkerboard to the list of layers
-	layers.push(checkerBoard);
-	layers.push(currentLayer);
-	layers.push(VFXLayer);
-	layers.push(TMPLayer);
+	if (firstPixel) {
+		// Cloning the entry so that when I change something on the first layer, those changes aren't 
+	    // propagated to the other ones
+	    layerListEntry = layerListEntry.cloneNode(true);
+		// Adding the first layer and the checkerboard to the list of layers
+		layers.push(checkerBoard);
+		layers.push(currentLayer);
+		layers.push(VFXLayer);
+		layers.push(TMPLayer);
+	}
 
 	//remove current palette
 	colors = document.getElementsByClassName('color-button');
@@ -92,4 +124,5 @@ function newPixel (width, height, palette) {
 	document.getElementById('save-as-button').classList.remove('disabled');
 	documentCreated = true;
 
+	firstPixel = false;
 }

views/pixel-editor.hbs

@@ -128,7 +128,7 @@
     <!-- LAYER MENU -->
     <ul id = "layers-menu">
         <li class = "layers-menu-entry selected-layer" draggable = "true">
-            <canvas></canvas>
+            <canvas class = "preview-canvas"></canvas>
             <ul class="layer-buttons">
                 <li class = "layer-button">
                     <button title="Lock layer" class="lock-layer-button">