title: Bring object to the front in canvas
body: <p>I try to use only one <code>&lt;canvas&gt;</code> element</p>
  
  <p><img src="https://i.stack.imgur.com/YzamE.png" alt="enter image description here"></p>
  
  <p>1 : Clip a image</p>
  
  <p>2 : Make one more rectangle</p>
  
  <p>But <strong>How to bring that rectangle to the front ?</strong></p>
  
  <hr>
  
  <pre><code>var canvas = document.getElementById('example');
  var ctx = canvas.getContext('2d');
  var image = document.createElement('IMG');
  image.onload = function () {
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(29, 96);
      ctx.lineTo(157, 0);
      ctx.lineTo(288, 93);
      ctx.closePath();
      ctx.clip();
      ctx.drawImage(image, 0, 0);
      ctx.restore();
  };
  image.src = 'http://lorempixel.com/500/500/';
  
  
  
  // This
  
  ctx.rect(20,20,150,100);
  ctx.fillStyle="red";
  ctx.fill();
  </code></pre>
  
  <p><strong>Demo :</strong> <a href="http://jsfiddle.net/yW86d/" rel="nofollow noreferrer">http://jsfiddle.net/yW86d/</a></p>