title: Drag and Drop to HTML5 Canvas
body: <p>I'm dragging an html element and dropped to a canvas, took the location where released and plot the object at same location at canvas. But showing at the different location. See my <a href="http://jsfiddle.net/YXxsH/2/" rel="nofollow">code</a>.</p>
  
  <p>Script</p>
  
  <pre><code>function init() {
      var canvas = document.getElementById("graphCanvas");
      var context = canvas.getContext("2d");
  
      context.lineWidth = 2;
  }
  
  function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("Text",ev.target.id);
  }
  
  function drop(ev) {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), 
          ev.clientX, ev.clientY);
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body onload="init();"&gt;
      &lt;canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=300 width=300 style="border:1px solid #000000;"&gt;&lt;/canvas&gt;
      &lt;img id="img1" src="http://static.tumblr.com/vcbmwcj/foumiteqs/arrow_up_alt1.svg" draggable="true" ondragstart="drag(event)"/&gt;
  &lt;/body&gt;
  </code></pre>