title: How to drag - drop and preview an image file on HTML canvas with vanilla javascript?
body: <p>I want to make an online filter web app. So I made some filter effects and drag and drop upload (with preview) on a <code>&lt;div&gt;</code> but I can't download it(using the download button) when the filter is applied as I don't know about Screen capture API or <code>&lt;svg&gt;</code>.So I want to draw the image on <code>&lt;canvas&gt;</code> as I know how to download the filtered image from the<code>&lt;canvas&gt;</code> but it appears that the functionality of drag and drop doesn't work anymore if I use it or I don't know how to use the drag effects (like on drag over it gives an effect as well as on drag leave removes the effect) and also don't know how to drop the image on <code>&lt;canvas&gt;</code>.  I am just giving some parts of my code down below.
  [note: I also added a button to upload an image as you can see down below in HTML that function works same as drag and drop an image function]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     dropzone.ondragover = function (){
      
          this.className = "drop__zone can__over";
           dropzone2.style.display = "none";
           
          return false;
      };
  
  dropzone.ondragleave = function(){
   
      this.className = "drop__zone";
      dropzone2.style.display = "block";
      
      return false;
  };
  
  dropzone.ondrop = function (e){
       
      e.preventDefault();
      e.stopPropagation();
      this.className = "drop__zone";
      dropzone2.style.display = "none";
       dropzone2.style.border = "none";
      
      update(e.dataTransfer.files[0]);
  };
  
  var update = function(file){
      var reader = new FileReader();
      reader.readAsDataURL(file);
      
      reader.onload = ()=&gt;{
         
          img.src = reader.result;
          img.style.maxHeight = "480px";
          img.style.maxWidth = "640px";
          dropzone.style.backgroundColor = "transparent";
        
          
         dropzone.appendChild(img);
     return false;     
      };
     
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="drop__zone" id="drop__zone"&gt;&lt;/div&gt;
  
  
      &lt;div class="dropzone" id="drop__zone"&gt;
         &lt;a  id="download_link" download="edited.jpg"  href=""&gt;&lt;/a&gt;
          &lt;span class="dropzone__span"&gt;
              Drag a Image Here &lt;br&gt;or&lt;br&gt;
          &lt;/span&gt;&lt;br&gt;
          &lt;input type="file" id="mainup" multiple="false" accept="image/*" class="fileinput"&gt;
          &lt;label for="mainup" class="btn__label" id="lab1"&gt;Upload a Picture&lt;/label&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>