title: HTML Image with vector overlay that allows zooming and panning with the image
body: <p>Here's a jsfiddle that gives an example of some problems I'm having : <a href="http://jsfiddle.net/8LRKW/" rel="nofollow">http://jsfiddle.net/8LRKW/</a></p>
  
  <p>In this example, if my rectangle's z-index is negative and the image is upper-most, I can double-click the image and it'll zoom and pan, but if I click my button to make the rectangle upper-most, I can no longer zoom/pan the image - how can I zoom/pan while the canvas is on top ?</p>
  
  <p>Additionally, how do I make the canvas zoom/pan in sync with the image being zoomed/panned?</p>
  
  <p>Also, as a side-note, one problem I've also noticed is that my rectangle initially is hidden and will only appear when canvas gets a mouse-over.  What's going on here, and how do I fix that?</p>
  
  <pre><code>&lt;div style="position:absolute;left:0px;top:0px;" id="village"&gt;
      &lt;p&gt;
          &lt;img src="http://www.consulenza-web.com/jquery/touchpanview/simpson.jpeg" alt="simpson" width="1920" height="1200" /&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;canvas style="position:absolute;left:0px;top:0px;z-index:999;" id="myCanvas" resize&gt;&lt;/canvas&gt;
  &lt;input style="position:absolute;left:0px;top:350px;z-index:9999;" type="button" value="Toggle Shape z-Index" onclick="$('#myCanvas').css('z-index',$('#myCanvas').css('z-index') * -1);" /&gt;
  
  
  var canvas = document.getElementById('myCanvas');
                  paper.setup(canvas);
                  var rectangle = new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100));
                  var path = new paper.Path.Rectangle(rectangle);
                  path.fillColor = '#e9e9ff';
  
  $('#village img').touchPanView({
              width: 600,
              height: 300,
              startZoomedOut: true
          });
  </code></pre>