Drop more pictures on canvas

Question

I am new to Fabric.js and I am searching way to draw picture on canvas after drop event.

Already I got it but I don't know how insert more pictures on canvas (on second drop i have only last insert picture on canvas).

Should I insert <img> object into some array and then draw array? Or exists other solution?

My example of problem: http://fiddle.jshell.net/654321mia/8JSVK/10/

Every time can be only one picture on canvas.

Answer 1

I've update your jsfiddle, and now it works.

The problem was that you were creating the fabric.js Canvas after the first drop. This caused the canvas element to be re-created, and the event handler you had set in the HTML get lost. Surely there is a better way to do this with fabric.js, but I just put the drop handler on the container of the canvas, and this way it works perfectly:

<div id="myCanvas-container" style="border:1px solid #d3d3d3;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <canvas id="myCanvas">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>