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

Question

Hi,

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

Answer 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).

Answer 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)

Answer 3

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