title: HTML5 - Canvas, draw rectangle through div
body: <p>I've made this example to show what my problem is: <a href="http://jsfiddle.net/GSRgf/" rel="nofollow">http://jsfiddle.net/GSRgf/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="canvas" width="500" height="500"&gt;&lt;/canvas&gt;
  &lt;div id="div"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function() {
  var ctx=$('#canvas')[0].getContext('2d'); 
  rect = {};
  drag = false;
  
  $(document).on('mousedown','#canvas',function(e){
      rect.startX = e.pageX - $(this).offset().left;
      rect.startY = e.pageY - $(this).offset().top;
      rect.w=0;
      rect.h=0;
      drag = true;
  });
  
  $(document).on('mouseup','#canvas',function(){
      drag = false;
  });
  
  $(document).on('mousemove','#canvas',function(e){
      if (drag) {
          rect.w = (e.pageX - $(this).offset().left)- rect.startX;
          rect.h = (e.pageY - $(this).offset().top)- rect.startY;
          ctx.clearRect(0, 0, 500, 500);
          ctx.fillStyle = 'rgba(0,0,0,0.5)';
          ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
      }
  });    
  });
  </code></pre>
  
  <p>How is it possible to keep drawing the rectangle when the mouse is over the div?</p>
  
  <p>Thanks!</p>