anchor.diff:   $(".arrastavel").on("dragstop click", function() {
       var index = $(this).index();
       $("#example_index").html("Index " + index + " was clicked");
  +
  +
    });
   });
   </script>
   
   <script>
     window.onload = function() {
  -    var canvas = document.getElementById('test');
  +    var canvas = document.getElementById('canvas');
       var ctx = canvas.getContext('2d');
  -    var width  = 300;
  -    var height = 300;
  -    console.log(canvas);
  +    var width  = 900;
  +    var height = 500;
  +    alert(window.innerWidth);
       canvas.height = height;
       canvas.width = width;
       canvas.addEventListener('mousedown', function(e) {
  
positive.code:       #contentArea { vertical-align:top;}
  </style>
   <style>
    canvas { z-index: 0 }
    els_jquery {z-index: 1; background: trasparent; }
    .draggable { float: left; background: transparent; border: none; }
    #draggable, #draggable2 { margin-bottom:20px; }
    #draggable { cursor: n-resize; }
    #draggable2 { cursor: e-resize; }
    #containment-wrapper { width: 500px; height:550px; border:0.1px solid #ccc; padding: 1px; float: right; }
    h3 { clear: left; }
  </style>
  <script>
  
negative.code:   <div align="left" id="test4" class="draggable ui-widget-content arrastavel">
    <a href="#"><img src="/testbed.png"></a>
    </div>
    <div align="left" id="test5" class="draggable ui-widget-content arrastavel">
    <a href="#"><img src="/testbed.png"></a>
    </div>
    <div align="left" id="test6" class="draggable ui-widget-content arrastavel">
    <a href="#"><img src="/testbed.png"></a>
    </div>
    <div align="left" id="test7" class="draggable ui-widget-content arrastavel">
    <a href="#"><img src="/testbed.png"></a>
    </div>
    <canvas id="canvas">Hello?</canvas>
  </div>
  
     
  <td><div id="example_index">Click one of the above divs</div></td>
  <div align="left">
    <br>FUNCIONEM, SCRIPTS GORDOS!</br>
  