using <canvas> element from javascript

views:

114

answers:

+3 Q:

using <canvas> element from javascript

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

+1 A:

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.

selvin 2010-07-13 12:17:17

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

Quamis 2010-07-13 12:20:06

+2 A:

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

James Westgate 2010-07-13 12:29:02

SVG might actually be a good ideea

Quamis 2010-07-13 12:33:00

+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.

bobince 2010-07-13 12:53:58

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.

Sparafusile 2010-07-13 13:10:38

@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 Westgate 2010-07-13 13:18:29

@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.

Sparafusile 2010-07-13 14:43:53

@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 ?

James Westgate 2010-07-13 16:47:57

@Spara - I do however point you to this post: http://stackoverflow.com/questions/3213877/javascript-click-on-given-element-in-canvas

James Westgate 2010-07-13 16:48:54

http://raphaeljs.com/ this one uses SVG and seems to support events:) thanks for pointing me to the right direction

Quamis 2010-07-14 06:03:44

@James - Think of the canvas element like a drawing surface in OpenGL. OpenGL and DirectX don't support attaching events to "elements", but that doesn't stop people from creating interactive games. Do a search for "opengl hit test" in Google and use the same technique on your canvas. A real life example: I create bar graphs in my web applications that allow the user to click on a bar to see more information. I have to keep track of where the bars are drawn and interpret the click event appropriately. It's not that hard, but have to think ahead and stay organized.

Sparafusile 2010-07-14 11:36:36

@spara - thanks, Im well familiar with this process (see opendiagram.codeplex.com) - however recoding all that functionality when jquery and SVG can do it out the box seems wasteful to me.

James Westgate 2010-07-15 07:20:52

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

PhiLho 2010-07-13 12:31:03

looked into it, but it dosen't support events... it simply draws things on a canvas element

Quamis 2010-07-13 12:32:39

@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.

PhiLho 2010-07-15 08:23:56

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"

Quamis 2010-07-15 11:05:12

Yes, it is rather low level, not a scenegraph. But it is very possible to manage the shapes/objects yourself, just more work...

PhiLho 2010-07-16 17:06:22

+2 A:

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.

Ant 2010-07-13 12:32:18

ansaurus

tags:

views:

answers:

using <canvas> element from javascript

related questions