4

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.

Improve this question

5 Answers 5

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That was exactly what I was looking for. Meanwhile I also found some other libraries which look quite promising. These are jCanvaScript, cakejs, EaselJS and Processing.js.
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.

Improve this answer

Comments

1

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 compare it against all the things you know you have drawn to the canvas, taking into account the order in which they were drawn.

Improve this answer

1 Comment

That's correct, but there are already libraries which provide the data structures capable to save the drawn objects in the browser. I'm looking for one which does the work of looking up the coordinates for me. Meanwhile I found jcotton (jcotton.sourceforge.net) which can do so. The problem is that it doesn't seem possible to create paths (like drawing lines with a pencil) with that library, so I'm still searching.
1

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.

Improve this answer

Comments

1

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.com/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.