Set the background in canvas using layer (zIndex) <p>I need to get a background on canvas using layers. Variable for it's background. I know I should use CSS and set the z-index, but do not know how to do it in this case.</p> <p>JS:</p> <pre><code>function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); var item1 = new Image(); item1.src = "images/sheep.png"; item1.addEventListener("load", function() { canvas.drawImage(item1,20,300)}, false); var item2 = new Image(); item2.src = "images/tshirt.png"; item2.addEventListener("load", function() { canvas.drawImage(item2,300,300)}, false); var background = new Image(); background.src = "images/background.png"; background.addEventListener("load", function() { canvas.drawImage(background,0,0,1024,768)}, false); } </code></pre> <p>HTML:</p> <pre><code>&lt;canvas id="canvas" width="1024" height="768"&gt; </code></pre>