HTML5: Framework/Library for Drag-and-Drop on Canvas

Question

I'm looking for a framework/library which enables me to perform several tasks on a HTML5-Canvas.

What I need are mechanisms to access objects after drawing them, so that they can be changed and parsed to XML. Furthermore I need to be able to Drag-and-Drop certain objects with the cursor.

I've already tried several frameworks but none of them gives the possibility to assign onDrag-Listeners to the object (only to the canvas). It might be possible to implement such behavior by hand but that grows complicated since I have to deal with much more than one object on the canvas. Also, performance is an important criterion, so it would be good if I could use optimized library-functions rather than my own miserable code. I do know of SVG as an alternative, so please don't try to push me that way. I need to do that with canvas to compare the performances of both.

So i think, what I'm looking for is a framework which let's me assign Listeners to canvas-objects. Animation-skills are not that important since everything will concentrate on the user-input by mouse.

Does anyone know of such a framework/library which fits my needs and can share some experience? I would be glad not being forced to test all the frameworks and libraries for HTML5-Canvas out there.

Thanks in advance.

EDIT: One thing I forgot to mention: Besides geometric objects I also need to be able to draw paths (i.e. scribbles) and parse them. Although it's not necessary to have handlers for them to, I would be happy, if i didn't have to implement that myself outside the library.

Answer 1

A great library that emulates objects with drag/drop, resize, rotate. It can also import SVG data which can help you with importing vector graphics.

The library is called fabric.js: https://github.com/kangax/fabric.js

You can see some demos and feel how it can suit you: http://kangax.github.com/fabric.js/demos/index.html

Answer 2

I don't have a library to suggest, but a technique that I've used is to add an invisible imagemap over the canvas. I then added area elements that correspond with the objects on the canvas.

Area tags react to all of the browser's native mouse events. This let you provide rich user interaction. Imagemaps are also supported by every mobile and desktop browser and performs better than any point-in-polygon algorithm implemented in javascript.

Ensuring that the area elements in the imagemap always line up with the objects show in the canvas does add some code complexity, but in practice it's not too difficult to overcome. Note, in Chrome you might run into some issues if you to change the coordinates of an area tag that's already in the DOM.

Here's a working example of this techinque: http://xavi.co/drag-shapes
And here's the code: https://github.com/Xavi-/Drag-Shapes

Hope this help.