Drag objects in canvas

Question

Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks

Answer 1

Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.

You can create draggable images like this:

var myImage = new DragImage(sourcePath, x, y);

Let me know if you have any questions about this. Hope it helps.

EDIT

There was a bug when dragging multiple images. Here is a new version.

Another thing you might want to check out is easeljs it sort of in the style of AS3... mouseEvents dragging etc...

Answer 2

The HTML Canvas—unlike SVG or HTML—uses a non-retained (or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:

1. Track the mousedown event and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
2. As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.

Some alternatives that I might suggest:

• SVG
• Pure HTML
• Multiple layered canvases, and drag one transparent canvas over another.

The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.

Update: Here are some examples showing dragging on the canvas:

• http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
• http://www.redsquirrel.com/dave/work/interactivecanvas/
• http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html

None of these have created a separate library for tracking your shapes for you, however.

Answer 3

KineticJS is one such Javascript Library that u can use exclusively for animations

Heres the Link html5canvastutorials

Answer 4

Canvas and jCanvas

You're definitely gonna want to check out jCanvas. It's a super clean wrapper for Canvas, which kicks open a lot of doors without adding code complexity. It makes things like this a breeze.

For example, here's a little sandbox of something close to what you're after, with dragging and redrawing built right in:

Drawing an Arrow Between Two Elements.

I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.

Hope that helps others, like me.

JP

Answer 5

As you create new objects whether they are windows, cards, shapes or images to be draggable, you can store them in an array of "objects currently not selected". When you click on them or select them or start dragging them you can remove them from the array of "objects not selected". This way you can control what can move in the event of a particular mousedown event or mousemove event by checking if it isn't selected. If it is selected it will not be in the "not selected" array and you can move the mouse pointer over other shapes while dragging shapes without them becoming dragged.

Creating arrays of objects you would like to drag also helps with hierarchy. Canvas draws the pixels belonging to the foremost object last. So if the objects are in an array you simply switch their instance as in element in the array say from objectArray[20] to objectArray[4] as you iterate through the array and draw the objects stored in the array elements you can change whether other objects are seen on top or behind other objects.