Removed global canvases

js/Startup.js

@@ -80,7 +80,7 @@ const Startup = (() => {
             layerListEntry = layerList.firstElementChild;
 
             // Creating the first layer
-            currentLayer = new Layer(width, height, canvas, layerListEntry);
+            currentLayer = new Layer(width, height, 'pixel-canvas', layerListEntry);
             currentLayer.canvas.style.zIndex = 2;
         }
         else {
@@ -124,10 +124,10 @@ const Startup = (() => {
         checkerBoard = new Layer(width, height, checkerBoardCanvas);
 
         // Creating the vfx layer on top of everything
-        VFXLayer = new Layer(width, height, VFXCanvas);
+        VFXLayer = new Layer(width, height, 'vfx-canvas');
 
         // Tmp layer to draw previews on
-        TMPLayer = new Layer(width, height, TMPCanvas);
+        TMPLayer = new Layer(width, height, 'tmp-canvas');
         
         // Pixel grid
         pixelGrid = new Layer(width, height, pixelGridCanvas);

js/_consts.js

@@ -1,2 +1,7 @@
 const MIN_Z_INDEX = -5000;
 const MAX_Z_INDEX = 5000;
+
+// Index of the first layer the user can use in the layers array
+const firstUserLayerIndex = 2;
+// Number of layers that are only used by the editor
+const nAppLayers = 3;

js/_ellipse.js

@@ -21,7 +21,7 @@ let endEllipseY;
  */
 function startEllipseDrawing(mouseEvent) {
 	// Putting the vfx layer on top of everything
-    VFXCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
+    VFXLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
     // Updating flag
     isDrawingEllipse = true;
 
@@ -54,7 +54,7 @@ function updateEllipseDrawing(mouseEvent) {
 function endEllipseDrawing(mouseEvent) {
 	// Getting the end position
 	let currentPos = getCursorPosition(mouseEvent);
-	let vfxContext = VFXCanvas.getContext("2d");
+	let vfxContext = VFXLayer.context;
 
 	endEllipseX = Math.round(currentPos[0] / zoom) + 0.5;
 	endEllipseY = Math.round(currentPos[1] / zoom) + 0.5;
@@ -95,7 +95,7 @@ function endEllipseDrawing(mouseEvent) {
 	}
 
 	// Clearing the vfx canvas
-	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+	vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
 }
 
 // TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
@@ -107,10 +107,10 @@ function endEllipseDrawing(mouseEvent) {
  */
 function drawEllipse(x, y) {
 	// Getting the vfx context
-	let vfxContext = VFXCanvas.getContext("2d");
+	let vfxContext = VFXLayer.context;
 
 	// Clearing the vfx canvas
-	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+	vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
 
 	// Drawing the ellipse
 	vfxContext.lineWidth = tool.ellipse.brushSize;

js/_layer.js

@@ -35,7 +35,7 @@ Events.on('click',"add-layer-button", addLayer, false);
 class Layer {
     constructor(width, height, canvas, menuEntry) {
         this.canvasSize = [width, height];
-        this.canvas = canvas;
+        this.canvas = Util.getElement(canvas);
         this.context = this.canvas.getContext('2d');
         this.isSelected = false;
         this.isVisible = true;

js/_mouseEvents.js

@@ -78,10 +78,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
 	// If the user finished placing down a line, clear the tmp canvas and copy the data to the current layer
 	if (currentTool.name === "line") {
-		const tmpCanvas = document.getElementById('tmp-canvas');
+		const tmpCanvas = TMPLayer.canvas;
 		currentLayer.context.drawImage(tmpCanvas, 0, 0);
 
-		const tmpContext = tmpCanvas.getContext('2d');
+		const tmpContext = TMPLayer.context;
 		tmpContext.clearRect(0, 0, tmpCanvas.width, tmpCanvas.height);
 	}
 

js/_rectSelect.js

@@ -12,7 +12,7 @@ function startRectSelection(mouseEvent) {
     // Saving the canvas
     new HistoryState().EditCanvas();
     // Putting the vfx layer on top of everything
-    VFXCanvas.style.zIndex = MAX_Z_INDEX;
+    VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
 
     // Saving the start coords of the rect
     let cursorPos = getCursorPosition(mouseEvent);
@@ -104,10 +104,10 @@ function cutSelection(mousePosition) {
  */
 function drawRect(x, y) {
     // Getting the vfx context
-    let vfxContext = VFXCanvas.getContext('2d');
+    let vfxContext = VFXLayer.context;
 
     // Clearing the vfx canvas
-    vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+    vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
     vfxContext.lineWidth = 1;
     vfxContext.strokeStyle = 'black';
     vfxContext.setLineDash([4]);
@@ -120,7 +120,7 @@ function drawRect(x, y) {
 }
 
 function applyChanges() {
-    VFXCanvas.style.zIndex = MIN_Z_INDEX;
+    VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
 }
 
 // Checks whether the pointer is inside the selected area or not
@@ -157,10 +157,10 @@ function cursorInSelectedArea() {
  */
 function moveSelection(x, y, width, height) {
     // Getting the vfx context
-    let vfxContext = VFXCanvas.getContext('2d');
+    let vfxContext = VFXLayer.context;
 
     // Clearing the vfx canvas
-    vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+    vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
     vfxContext.lineWidth = 1;
     vfxContext.setLineDash([4]);
 

js/_rectangle.js

@@ -20,7 +20,7 @@ let endRectY;
  */
 function startRectDrawing(mouseEvent) {
 	// Putting the tmp layer on top of everything
-    TMPCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+    TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
     // Updating flag
     isDrawingRect = true;
 
@@ -51,7 +51,7 @@ function updateRectDrawing(mouseEvent) {
 function endRectDrawing(mouseEvent) {
 	// Getting the end position
 	let currentPos = getCursorPosition(mouseEvent);
-	let tmpContext = TMPCanvas.getContext("2d");
+	let tmpContext = TMPLayer.context;
 
 	endRectX = Math.floor(currentPos[0] / zoom) + 0.5;
 	endRectY = Math.floor(currentPos[1] / zoom) + 0.5;
@@ -92,7 +92,7 @@ function endRectDrawing(mouseEvent) {
 	}
 
 	// Clearing the tmp canvas
-	tmpContext.clearRect(0, 0, TMPCanvas.width, TMPCanvas.height);
+	tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
 }
 
 /** Draws a rectangle with end coordinates given by x and y on the tmp layer (draws
@@ -102,12 +102,11 @@ function endRectDrawing(mouseEvent) {
  * @param {*} y The current end y of the rectangle
  */
 function drawRectangle(x, y) {
-	console.log("drawing, color: " + TMPCanvas.getContext("2d").fillStyle);
 	// Getting the tmp context
-	let tmpContext = TMPCanvas.getContext("2d");
+	let tmpContext = TMPLayer.context;
 
 	// Clearing the tmp canvas
-	tmpContext.clearRect(0, 0, TMPCanvas.width, TMPCanvas.height);
+	tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
 
 	// Drawing the rect
 	tmpContext.lineWidth = tool.rectangle.brushSize;
@@ -138,7 +137,3 @@ function setRectToolSvg() {
         fullRectangleSVG.setAttribute('display', 'visible');
     }
 }
-
-function applyChanges() {
-    //VFXCanvas.style.zIndex = MIN_Z_INDEX;
-}

js/_variables.js

@@ -12,10 +12,6 @@ var eyedropperPreview = document.getElementById("eyedropper-preview");
 // REFACTOR: File class?
 var canvasView = document.getElementById("canvas-view");
 
-// main canvas
-// REFACTOR: carefully check if it's possible to remove this one
-var canvas = document.getElementById('pixel-canvas');
-
 // Layers
 // REFACTOR: File class / IIFE?
 var layers = [];
@@ -25,14 +21,9 @@ var currentLayer;
 // VFX layer used to draw previews of the selection and things like that
 // REFACTOR: File class
 var VFXLayer;
-// VFX canvas
-var VFXCanvas = document.getElementById('vfx-canvas');
-
 // TMP layer
 // REFACTOR: File class
 var TMPLayer;
-// TMP canvas
-var TMPCanvas = document.getElementById('tmp-canvas');
 
 // Pixel grid layer
 // REFACTOR: File class
@@ -43,10 +34,3 @@ var pixelGridCanvas;
 // REFACTOR: I was thinking that the special layers (pixel grid, checkerboard ecc) could be an extension
 // or a variatin of the standard Layer class? I wonder if we can use inheritance or something to
 // recycle stuff
-
-// Index of the first layer the user can use in the layers array
-// REFACTOR: Consts?
-var firstUserLayerIndex = 2;
-// Number of layers that are only used by the editor
-// REFACTOR: Consts?
-var nAppLayers = 3;