drag and drop multiple image from one canvas to another canvas in html5

The short & simple answer is: you can't.

The qualified answer is: The thing with the canvas element is that it holds a number of different state variables (stroke color, width, fill color, and other assorted styles, positions and transforms) as well as the pixels that it contains. That is to say, it doesn't keep track of any elements drawn to it.

The html5 drag/drop demo moves html elements around. You could drag and drop the whole canvas, but not the objects that have been drawn to it. Imagine drawing some text in a bitmap editor over a photo background. You can't just copy the text any more - there is no 'text' - there is only a series of pixels that are coloured in a way that represents text.

That's the state of affairs with the canvas.

However, if you were to maintain a list yourself of which objects were drawn to the canvas and where, _then_ you could handle mouse events on the canvas and check your list of coords/objects to see if the cursor is above any of them. You could then 'select' the 'object' and allow dragging to another canvas. This would then remove the object from your list for the first canvas, redraw that canvas and then insert it into the list of objects to be drawn onto the second canvas, before updating that canvas too.