title: How to access the image data after dropping an image from the html-part of a webpage onto a canvas?
body: <p>This is a follow up question to
  <a href="https://stackoverflow.com/questions/34761204/how-to-drop-texts-and-images-on-a-canvas-firefox-41-0-1">How to drop texts and images on a canvas? (Firefox 41.0.1)</a></p>
  
  <p>I simply can't find out how to access the image data of the image I dropped onto the canvas. I tried things like <code>data = event.dataTransfer.getData("image")</code>, but that all doesn't work.</p>
  
  <pre class="lang-js prettyprint-override"><code>function addDragNDropToCanvas() {
      document.getElementById('canvas').addEventListener("dragover", function(event) { event.preventDefault();}, false);
      //handle the drop
      document.getElementById('canvas').addEventListener("drop", function(event) {
          event.preventDefault();
          console.log('something is dropped on the object with id: ' + event.target.id);
          // var directData=event.dataTransfer.getData("image");
          console.log(event);
          }, false);
  
   }
  </code></pre>
  
  <p>There surely is the image-data somewhere incorporated in the drop-event data? Isn't it???
  (The image doesn't have an own id-attribute.)</p>