Multiple images/layers on Canvas

Question

I have a canvas that I add a background image to from my source in the Html, I then insert images from my local computer and add text to the image, I am able to move/rotate image and text no problem. I wish to have the ability to move the uploaded image and text to back and to front of the background image, I cannot find a solution, I think it involves Multiple Canvas layers or something of the sort. Please can someone suggest a way to do this?

        <div class="well" style="height:350px;"> 
        <a name="1"><center>Sonstiges</center></a>
        <div class="cleaner_h3"></div>
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son01r.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son02r.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son09.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son04p.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son05p.png">
        </div>

    Jquery portion where I add the background image

        $(".img-polaroid").click(function(e){
                    var el = e.target;          
                    var design = $(this).attr("src");      //src is the particular image you click on
                    $('#tcanvas').css({


                        'backgroundImage': 'url(' + design +')',
                        'backgroundRepeat': 'no-repeat',
                        'backgroundPosition': 'top center',
                        'background-size': '100% 100%'



                                        });
            }); 


  Canvas element

      <div id="phoneDiv" class="page" style="width: 800px; height: 800px; position: relative;left:5%; background-color: rgb(255, 255, 255);"> 
        <canvas id="tcanvas" width=800 height="800" class="hover" style="-webkit-user-select: none;"></canvas>


    </div>

Answer 1

Problem:

You have an existing image on the canvas and you want to draw another image behind the existing image.

You can use context.globalCompositeOperation="destination-over" to cause subsequent drawing to be drawn "under" the existing content.

What happens is that any existing non-transparent pixels on the canvas will remain and the new image is drawn only into the transparent pixels.

So draw this wall-frame with transparent pixels inside the frame:

context.drawImage(backgroundImage,0,0);

Then set compositing to "destination-over"

(any new drawing will display only where the existing wall-frame is transparent).

context.globalCompositeOperation="destination-over";

Then draw a second image:

The city will be "drawn behind" the existing image (thanks to compositing):

context.drawImage(cityImage,0,0);