How to work with the position of elements in the canvas?

Question

JavaScript

There is a canvas element on the page. I uploaded an image to it. at a certain event, I load another picture (exactly the same, but with a different background). The new picture is higher than the old one. Is it possible to make it appear under the old one? I need an analogy with z-index in css
PS I work with fabrick.js

Answer 1

Isn't it better to exploit the background for these purposes, swapping the image sources?

<style>
      #elem1
      {
        display: block;
        width: 400px;
        height: 400px;
        background-image: url("back1.png"),
                          url("back2.png");
        transition: background-image 0.5s ease; /* для наглядности эффекта */
      }
    </style>
    <div id="elem1"></div>
    <script>
    var trigger = 0;
    setInterval(function()
    {
      var elem1 = document.getElementById('elem1');
      elem1.style.backgroundImage = trigger % 2 == 1 ? 'url("back1.png"), url("back2.png")' : 'url("back2.png"), url("back1.png")';
      trigger++;
    }, 1000);

    </script>

Answer 2

It is possible, why not? Create two canvases with the same position - one above the other and draw on them. Canvases are layers.

Answer 3

You look in Google jsfiddle canvas example And you get thousands of examples of your task.