htmldrag-and-drophtml5-canvasglobalcompositeoperation

Can we drag and drop Composite shapes from one canvas to another


I am new to HTML5, as I know only basics about this. If anyone could help me in this that would be great for me.

I need to design diff shapes and drag and drop from div to canvas. I created different shapes using globalcomposite operation in canvas, now I need to drag from canvas to another canvas.

I hope some one understood my point any help would be great. jsfiddle.net/rGUma/5/# some what like this,in place those three images i need to keep my design shapes is that possible.

That's not my jfiddle its an example,i want like that Thanks for ur response


Solution

  • As soon as you draw an image to a canvas, it stops being a coherent image object and becomes a bunch of pixels in a graphic buffer. When you want to interact with these pixels, you need to do this programmatically. I think you won't get around implementing your own drag&drop functionality by catching mousedown, mousemove, mouseout, mouseover and mouseup events on both canvases and drawing the shape the users clicked on at their mouse cursor while they move the mouse.