MultiLayerCanvas

gistfile1.txt

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; };
};