How To Drag And Drop From One Html5 Canvas To Another

I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag som

Solution 1:

You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.

Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.

If you have two canvases and want to drag something from one to the other, what I would do is:

1. On mouse down on the 'menu' canvas, create a new canvas programmatically just as large as the object, and (using absolute CSS positioning) place it over top of the item the user clicked on.
2. Draw the item onto that canvas.
3. Track the mousemove event on the document, and update the position of the canvas relative to the mouse.
4. When the user releases the mouse over the destination canvas, throw away (or hide) your tiny 'dragging' canvas, and re-draw the main canvas with the item that was dragged in the appropriate location.

Though, what I'd probably really do here is use SVG. ;)

Solution 2:

Check this answer. It is for multiple select drag & drop, but maybe will be useful.

Solution 3:

Why does this need to be 2 canvases? The canvas is your drawing area, you control it. Why do you need 2?