HTML5: Framework / Library for drag and drop to canvas

Question

I am looking for a framework / library that allows me to perform several tasks on HTML5-Canvas.

I need mechanisms to access objects after they are drawn so that they can be modified and parsed in XML. In addition, I need to be able to drag certain objects with the cursor.

I have already tried several frameworks, but none of them makes it possible to assign onDrag-Listeners to an object (only for canvas). It may be possible to implement it manually, but it gets complicated, since I have to deal with much more than one object on the canvas. In addition, performance is an important criterion, so it would be nice if I could use optimized library functions rather than my own pathetic code. I know SVG as an alternative, so please don't try to push me that way. I need to do this using canvas to compare the characteristics of both.

So, I think what I'm looking for is a structure that allows me to assign Listeners to canvas-objects. Animation skills are not so important as everything will focus on user input with the mouse.

Does anyone know of a structure / library that fits my needs and can share my experience? I would be glad if I had not been forced to test all the frameworks and libraries for HTML5-Canvas.

Thanks in advance.

EDIT: One thing I forgot to mention: besides geometric objects, I also need to be able to draw tracks (like scribbles) and analyze them. Although there is no need for them to have handlers, I would be happy if I did not have to implement this myself outside the library.

Answer 1

A large library that emulates objects using drag and drop, resizing, rotation. It can also import SVG data, which can help you import vector graphics.

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

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

Answer 2

In fact, there are no such things as “canvas objects” that can be selected outside of what you describe by the user classes themselves, etc. When you draw something that is, the browser simply sees in it one large collection of pixels.

The only way to do what you describe is to capture the coordinates of the mouse event and compare it with all the things that, as you know, you painted on the canvas, taking into account the order in which they were drawn.

Answer 3

To change the canvas, you need to clear it and redraw it. Usually every frame. cake.js makes this frivolous.

Solution A) In order to interact with the mouse, you will need to store an array of objects and z-indices, and then when the user clicks, determine offsetX and offsetY for the click and determine what they clicked on.

Solution B) Add absolutely positioned divs with z-index and positioning, reflecting the images that you painted on the underlying canvas. Take the click / drag events from these divs.

Answer 4

I don't have a library to offer, but the method I used is to add an invisible imagemap on top of the canvas. Then I added area elements that match the objects on the canvas.

Area labels respond to all browser-related mouse events. This will allow you to provide rich user experience. Imagemaps is also supported by every mobile and desktop browser and works better than any javascript - based point-in-polygon algorithm.

Ensuring that the area elements in the image map always match the objects displayed on the canvas adds some code complexity, but in practice this is not so difficult to overcome. Please note: in Chrome, you may encounter some problems if you change the coordinates of the area tag, which is already in the DOM.

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

I hope for this help.

Answer 5

I used kinetic.js for limited drawers and collisions on canvas.

You may need to create several classes yourself. http://www.kineticjs.com/