diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index fd57476..79026b2 100644 --- a/css/pixel-editor.scss +++ b/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; diff --git a/js/_checkerboard.js b/js/_checkerboard.js index 1e42c77..49a7796 100644 --- a/js/_checkerboard.js +++ b/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 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(); diff --git a/js/_newPixel.js b/js/_newPixel.js index e224e1b..e6f011b 100644 --- a/js/_newPixel.js +++ b/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