HTML5 Canvas + select / drag-and-drop features in a JS lib?

Question

I'd like to use HTML5 Canvas, but I'd like to use it in terms of shapes, texts and curves, able to attach traditional DOM events like onClick or drag-and-drop functions. Is there any Javascript library that is able to do that for me? I've seen that gwt-canvas is close to this approach, but haven't looked it in details.

Thanks, Istvan

Solution 1

I don't know much about the js field, but i'm inclined to recommend http://processingjs.org/ However, do note that it's pretty much a java library implemented in javascript.

I think it might help to clarify your question as to whether you need to attach events (onClick, etc...) to specific drawn objects (shapes, text, curves, etc...) or if you just need to attach the event to the canvas area itself.

BTW, gwt-canvas would be used in conjunction with Google Web Toolkit meaning that it's not really a javascript library at all (AFAIK, someone please correct me if I'm wrong).

Solution 2

Have a look at the crossbrowser framework raphaël (js/svg/vml), this video shows it doing drag&drop / touch-events (try out the actual demo here)

Solution 3

http://www.html5canvastutorials.com/advanced/html5-canvas-drag-and-drop-tutorial/ this is a really good tutorial on kinetic.js and html5 canvas

Solution 4

This tutorial might help you. http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

View more solutions

Comments

[kangax]

Take a look at fabric.js which gives you exactly that — shapes, text objects, images, etc. — all programmatically accessible and modifiable.

[István]

event attachment: I don't really care if it is attached to the canvas as long as the programming model allows me to distinguish the separate shapes. gwt-canvas: I'm ok with GWT programming. Thanks for the processingjs.org suggestion, I will take a deeper look into it.

[István]

I've checked it with my Mac Safari and it definitely looks great! Do you have performance benchmarks on IE7? (the worst browser I care)

[Erik Dahlström]

I don't have any benchmark results, but why don't you try out some of the demos and see for yourself?

[JonDrnek]

+1 for this framework. The first time I had this problem space I rolled my own ... not exactly rocket science but not a cakewalk. This is a huge timesaver.

[Jonas]

+1 But is raphael using HTML5 canvas (as the question is about) or is it only for SVG?

[Erik Dahlström]

@jonas: raphael uses svg (and vml for older versions of IE). The question itself is basically describing svg.