3

Is there any JS library designed for working with canvas elements?

I don't really care about IE compatibility. I need to create objects(complex drawings with text) , draw lines between them, linear, bezier with different strokes, and attach event handlers to them(i need mouseOver and click).

Anyone has any experience with a library that has built-in support for this?

EDIT: http://raphaeljs.com/ seems to have these features

Improve this question
2
  • 2
    <canvas> is a HTML element, not JavaScript. Commented Jul 13, 2010 at 12:10
  • Raphaël uses SVG, not canvas... Commented Jul 16, 2010 at 17:07

4 Answers 4

Reset to default
2

Canvas doesnt support javascript, but SVG does. You could use jQuery to attach events etc to elements, just like other Dom elements.

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

9 Comments

+1. If you're creating persistent ‘objects’ and want to handle events, you definitely want retained-mode graphics like SVG's, rather than the purely bitmap-based canvas.
The statement "Canvas doesn't support JavaScript" doesn't make any sense. You use JavaScript to draw on Canvas and you use JavaScript to capture events.
@Spara - From what I understand, you can use javascript to draw on the canvas, but you cannot use it to manipulate the individual elements on the canvas - e.g. attach events which is what I originally meant.
@James - Sure it does. You could create custom JavaScript objects with drawing information and event handlers. Use the onClick event to determine which object was clicked and pass the event onto the correct object. Saying canvas doesn't support JavaScript is like saying apples don't support pies.
@Spara - I definitely read that this was one of the criticisms levelled at Apple when they brought out <canvas> - now I cant find the reference - and I cant find any samples of canvas elements and script interaction either - do you have any samples/links ?
|
2

CAKE fulfills some of your requirements:

http://glimr.rubyforge.org/cake/canvas.html#KeyboardTest

It's been abandoned by its author, though, so it's doubtful that the areas its lacking in will be improved any time soon.

Improve this answer

Comments

1

Well the Mozilla's API is quite good for working with canvas https://developer.mozilla.org/en/drawing_graphics_with_canvas

What's lacking? What would you like to see in a canvas library? - it might be a good project to be done on sourceforge or perhaps YUI or jquery can include it if you write to them about it.

Improve this answer

1 Comment

it dosen't have support for events. i need to draw an object and then attach an event hadled to it
0

Maybe Processing.js is what you look for...

Improve this answer

4 Comments

looked into it, but it dosen't support events... it simply draws things on a canvas element
@Quamis: The home page mentions mousePressed() function, key events, etc. So it does support events, like the Java Processing does. Take a look at the exhibition section, there are examples like Chaos Theory, handling left and right click.
They support events for the whole canvas, not for individual elements. What they have there is basically the click() event from HTML, with pointerX and Y set, not the actual clicked shape in the canvas. After further reading, a canvas is a simple bitmap, where you control each pixel individually, there is no notion of "objects" or "nodes"
Yes, it is rather low level, not a scenegraph. But it is very possible to manage the shapes/objects yourself, just more work...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.