javascript - draw image with layers

Question

Have I possibility to draw image in canvas, with layers? Particularly using fabric.js or literallycanvas.js ? Will be appreciate for any information or examples, ty

Answer 1

Layers are software abstractions. They define groups of items that are processed in a specific order (layered).

Anything can be layered, so drawing on the canvas it is easy to make layers.Group all the objects to be drawn in each layer together. Then render all objects in each layer together in the order defined by the layers.

A very simple layer example

var layers = [];  // holds layers
function addLayer(order){ /// creates and adds a layer
    var l;
    layers.push(l = {
        order : order,
        items : [],
        render : function(){
           this.items.forEach(function(img){
               ctx.drawImage(img.bitmap,img.x,img.y);
          });
    });
    return l;

}
// some items for the layers
var img1 = {
    bitmap : new Image("URL"),
    x : 100,
    y : 200,
}
var img2 = {
    bitmap : new Image("URL"),
    x : 300,
    y : 200,
}
// create a layer order 1
var lay1 = AddLayer(1);
// add some items to lay1
lay1.items.push(img1);
lay1.items.push(img2);
// add a second layer order 0
var lay2 = AddLayer(0);
lay1.items.push(img3);
lay1.items.push(img4);


// sort layers by order
layers.sort(function(a,b){return a.order-b.order;});
// process each layer in the sorted order
layers.forEach(function(layer){
    layer.render();
});