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 plicated 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 pare 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.

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 plicated 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 pare 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.

• javascript
• html5-canvas

5 Answers 5

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./kangax/fabric.js

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

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 plexity, but in practice it's not too difficult to overe. 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./Xavi-/Drag-Shapes

Hope this help.

There aren't really such things as 'canvas objects' that can be selected, outside of anything you describe yourself with custom classes and such. Once you draw something that's it, the browser just sees it as one big collection of pixels.

The only way you can do what you describe is capture the coordinates of the mouse event, and pare it against all the things you know you have drawn to the canvas, taking into account the order in which they were drawn.

In order to change a canvas, you need to clear it and redraw. Usually every frame. cake.js makes this easy-ish.

Solution A) To have mouse interaction, you will need to keep an array of objects and z-indexes, then when the user clicks, determine offsetX and offsetY for click, and determine what they've clicked on.

Solution B) Add absolutely positioned divs with z-index and positioning mirroring the images you have drawn on the underlying canvas. Take your click/drag events from these divs.

I used kinetic.js for bounding boxes and collisions on the canvas.

Probably you have to set up some classes on your own. http://www.kineticjs./