title: How can I control z-index of canvas objects?
body: <p>When I draw some objects in canvas, sometimes new objects places under old ones. For example, I add some images to canvas and then draw a line. when I run code images are top of the line. I searched web for a solution. But there was not an straight-forward solution. :( In some cases, it have seen as a bug! in explorers. How can I control z-index?</p>
  
  <p><strong>Edit: this is my code</strong></p>
  
  <pre><code>&lt;img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;"&gt;
  &lt;canvas id="c1" style="border:1px solid #998800"&gt;&lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
  var canvasID = document.getElementById('c1');
  var ctx = canvasID.getContext('2d');
  var img = new Image();
  img.src = document.getElementById('black_checkers_piece').src;
  img.onload = function(){
  ctx.drawImage(img, 10, 10, 32, 32);
  }
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.stroke();
  &lt;/script&gt;
  </code></pre>