title: How to make an area in canvas html droppable?
body: <p>How do you transfer an image of a div or file to some droppable canvas area (inside canvas)? My intention is to make a photobook.</p>
  
  <p>I was doing it with div tags, but I have seen that all photobooks do it with canvas. They even send the photo as drop as canvas.</p>
  
  <pre><code>&lt;canvas id="canvas" style="position:absolute;"&gt;&lt;/canvas&gt;
  
  &lt;canvas id="canvas-encima" style="position:absolute;left:8em;top:7em;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <pre><code>&lt;script&gt;
    var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
  
    canvas.width= 1000;
    canvas.height = 481;
  
    var background = new Image();
    background.src = "upload/plantilla5prueba.jpg";
    background.onload = function() {
      ctx.drawImage(background,0,0);
    }  
  
    var canvas2 = document.getElementById("canvas-encima"),
    ctx2 = canvas2.getContext("2d");
    canvas2.width= 330;
    canvas2.height = 280;
    var image2 = new Image();
    image2.src = "upload/celular.png";
    image2.onload = function() {
    ctx2.drawImage(image2,0,0);
     ;}
  &lt;/script&gt;
  </code></pre>
  
  <p>I believe that with the drag and drop of a blob or uploaded file to the canvas droppable, the photobook would almost be made.</p>