 <p>Here is code to drop an outside element into a canvas and report the drop coordinates:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #dragMe{border:3px solid blue; width:60px; background-color:cyan; line-height:30px;} canvas{border:3px solid red;} &lt;/style&gt; &lt;script&gt; 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"); alert("You dropped [#"+data+"] in the canvas at: X="+ev.clientX+" and Y="+ev.clientY); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Drag the text to the red canvas&lt;/p&gt; &lt;canvas id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/canvas&gt; &lt;br&gt; &lt;p id="dragMe" src="house-icon.png" draggable="true" ondragstart="drag(event)"&gt;Drag Me&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>