Last active
December 17, 2015 03:29
-
-
Save Warpten/5543530 to your computer and use it in GitHub Desktop.
MultiLayerCanvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Layer(width, height) { | |
this.width = width; | |
this.height = height; | |
this.canvas = document.createElement("canvas"); | |
this.context = this.canvas.getContext("2d"); | |
this.canvas.width = width; | |
this.canvas.height = height; | |
this.getCanvas = function() { return this.canvas; }; | |
this.getImageData = function(sx, sy, sw, sh) { | |
return this.context.getImageData(sx || 0, sy || 0, sw || (this.width - (sx || 0)), sy || (this.height - (sh || 0))); | |
}; | |
this.drawImage = function(image, x, y, w, h) { | |
var img = new Image(), | |
self = this; | |
img.onload = function() { | |
self.context.drawImage(this, x, y, w, h); | |
}; | |
img.src = image; | |
}; | |
} | |
function MultiLayerCanvas(width, height, layerCount) { | |
this.layerCount = layerCount; | |
this.width = width; | |
this.height = height; | |
//! You need these two if you want to pre-render all the layers | |
//! in a canvas that is not in the DOM yet. If that is the case, | |
//! change MultiLayerCanvas:Render and use that context to draw | |
//! images, then copy the ImageData into the rendering node. | |
this.renderedCanvas = document.createElement("canvas"); | |
this.renderedContext = this.renderedCanvas.getContext("2d"); | |
this.layers = []; | |
for (var i = 0; i < layerCount; ++i) | |
this.layers[i] = new Layer(width, height); | |
this.getLayer = function(layerIndex) { | |
return this.layers[layerIndex]; | |
}; | |
this.getLayers = function() { return this.layers; }; | |
this.Render = function(renderingNode) { | |
// Clear the whole context - Just in case | |
renderingNode.getContext("2d").strokeStyle = "#FFFFFF"; | |
renderingNode.getContext("2d").clearRect(0, 0, this.width, this.height); | |
// Render each layer ontop of the other one | |
this.layers.forEach(function(layer) { | |
renderingNode.getContext("2d").drawImage(layer.getCanvas(), 0, 0); | |
}, this); | |
}; | |
this.drawImage = function(img, layerIndex, x, y, w, h) { | |
this.layers[layerIndex].drawImage(img, x, y, w, h); | |
}; | |
this.fillRect = function(layerIndex, x, y, w, h) { this.layers[layerIndex].context.fillRect(x, y, w, h); }; | |
this.clearRect = function(layerIndex, x, y, w, h) { this.layers[layerIndex].context.clearRect(x, y, w, h); }; | |
this.strokeRect = function(layerIndex, x, y, w, h) { this.layers[layerIndex].context.strokeRect(x, y, w, h); }; | |
this.moveTo = function(layerIndex, x, y) { this.layers[layerIndex].context.moveTo(x, y); }; | |
this.lineTo = function(layerIndex, x, y) { this.layers[layerIndex].context.lineTo(x, y); }; | |
this.beginPath = function(layerIndex) { this.layers[layerIndex].context.beginPath(); }; | |
this.closePath = function(layerIndex) { this.layers[layerIndex].context.closePath(); }; | |
this.stroke = function(layerIndex) { this.layers[layerIndex].context.stroke(); }; | |
this.fill = function(layerIndex) { this.layers[layerIndex].context.fill(); }; | |
this.arc = function(layerIndex, x, y, radius, sAngle, eAngle, antiClockwise) { | |
this.layers[layerIndex].context.arc(x, y, radius, sAngle, eAngle, antiClockwise); | |
}; | |
this.rect = function(layerIndex, x, y, w, h) { | |
this.layers[layerIndex].context.rect(x, y, w, h); | |
}; | |
this.fillStyle = function(layerIndex, color) { this.layers[layerIndex].context.fillStyle = color; }; | |
this.strokeStyle = function(layerIndex, color) { this.layers[layerIndex].context.strokeStyle = color; }; | |
this.globalAlpha = function(layerIndex, value) { this.layers[layerIndex].context.globalAlpha = value; }; | |
this.lineWidth = function(layerIndex, value) { this.layers[layerIndex].context.lineWidth = value; }; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment