Added functions for canvas management in order to create multiple underlying canvases for implementing layers.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>

css/pixel-editor.scss

@@ -35,9 +35,9 @@ svg {
   outline: 0 !important;
 }
 
-#pixel-canvas {
+canvas {
   cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
-  
+
   border: solid 1px #fff;
   image-rendering:optimizeSpeed;             /* Legal fallback */
   image-rendering:-moz-crisp-edges;          /* Firefox        */
@@ -49,11 +49,19 @@ svg {
   -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
   width: 400px;
   height: 400px;
-  display: none;
   position: fixed;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
 }
 
+#checkerboard {
+  z-index:1000;
+}
+
+#pixel-canvas {
+  z-index:1;
+  background:transparent;
+}
+
 #eyedropper-preview {
   position: absolute;
   width: 45px;
@@ -83,7 +91,6 @@ svg {
 }
 
 #canvas-view {
-  background: color(indent-dark);
   bottom: 0px;
   left: 64px;
   right: 48px;

js/_canvas.js

@@ -0,0 +1,34 @@
+function Canvas(height, width, canvas) {
+    this.canvasSize = [width, height],
+    this.canvas = canvas,
+    this.initialize = function() {
+        var maxHorizontalZoom = Math.floor(window.innerWidth/canvasSize[0]*0.75);
+        var maxVerticalZoom = Math.floor(window.innerHeight/canvasSize[1]*0.75);
+
+        zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
+        if (zoom < 1) zoom = 1;
+
+        //resize canvas
+        this.canvas.width = canvasSize[0];
+        this.canvas.height = canvasSize[1];
+        this.canvas.style.width = (this.canvas.width*zoom)+'px';
+        this.canvas.style.height = (this.canvas.height*zoom)+'px';
+
+        //unhide canvas
+        this.canvas.style.display = 'block';
+
+        //center canvas in window
+        this.canvas.style.left = 64+canvasView.clientWidth/2-(canvasSize[0]*zoom/2)+'px';
+        this.canvas.style.top = 48+canvasView.clientHeight/2-(canvasSize[1]*zoom/2)+'px';
+    },
+    this.resize = function() {
+        let newWidth = (this.canvas.width*zoom)+'px';
+        let newHeight = (this.canvas.height*zoom)+'px';
+
+        this.canvas.style.width = newWidth;
+        this.canvas.style.height = newHeight;
+
+        this.width = newWidth;
+        this.height = newHeight;
+    }
+}

js/_variables.js

@@ -12,9 +12,12 @@ var prevEraserSize = 1;
 var menuOpen = false;
 var dialogueOpen = false;
 var documentCreated = false;
+
+// 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");
 
 //common elements
 var brushPreview = document.getElementById("brush-preview");

js/pixel-editor.js

@@ -42,6 +42,7 @@
 //=include _deleteColor.js 
 //=include _replaceAllOfColor.js
 //=include _checkerboard.js
+//=include _canvas.js
 
 
 /**load file**/