Question

I have a question !
In a html5 canvas, I create an “x” number of images. The last image created is always above the other. Is it possible to swap the depths of the images without the need for libraries? (I do not intend to reverse the order of the variables)
I want somethin like this (without kinetic):
http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-layering-with-kineticjs/

so, here is the code I’m using:

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");  


    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = "image1.png";

    var imageObj2 = new Image();
    imageObj2.onload = function() {
      context.drawImage(imageObj2, 40, 30);
    };
    imageObj2.src = "image2.png";

    /* I want to put "Image1.png" over "Image2.png" dynamically, for example, pressing a button, all this after render on the canvas */

Answer 1

Draw the furtherest images first. It might help to put the images in an array so you can just loop through them.

Otherwise, in the case of your example, this will fix it as you are drawing context.drawImage(imageObj, 69, 50); last. Think of it as if you would draw it on paper; what you draw last is above what you have already drawn.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");  

var imageObj2 = new Image();
imageObj2.onload = function() {
  context.drawImage(imageObj2, 40, 30);
};
imageObj2.src = "image2.png";

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, 69, 50);
};
imageObj.src = "image1.png";