Canvas and jQuery?

views:

answers:

Canvas and jQuery?

Is it possible to use the JavaScript jQuery framework with the HTML5 <canvas> element? Or do I have to do it with plain JavaScript.

I'm just wondering, because I think I could save a lot of time with using jQuery, but I have no clue about the <canvas> element's uses yet, so it may be completely impossible!

Anyone know if I can use jQuery?

Thanks!

+2 A:

You can use jQuery to select the canvas element, but you'd have to use its own methods. A decent start would be https://developer.mozilla.org/en/canvas_tutorial .

meder 2010-08-24 17:54:00

OK, that would actually save a lot of time really, instead of all that getElementbyID or whatever it is. So, if the jQuery library is "extended" or whatever you call the term, would it be possible to leverage jQuery with `<canvas>` in the future? Fully, I mean.

BOSS 2010-08-24 17:59:04

*Why* can't you just use canvas's own methods?

meder 2010-08-24 18:01:14

I didn't say I couldn't, I'm guessing those are separate from JavaScript completely?

BOSS 2010-08-24 18:11:02

jQuery is a library to interact with the DOM. It isn't targeted to abstract canvas's methods.

meder 2010-08-24 18:14:04

But, there's nothing wrong with doing what you said now is there? Using it to select, and using JavaScript and canvas' methods for the actual manipulation.

BOSS 2010-08-24 18:21:15

That would be like buying $200 worth of tools and using just a screwdriver from that set. Sure there's nothing wrong, but if your entire goal is to do mostly canvas-scripting you don't need jQuery at all.

meder 2010-08-24 18:33:21

Good point! :) You've been referencing Canvas' own methods, and are there a specific set of methods from the `<canvas>` API that are separate from JavaScript? And then libraries like Raphael make it easier to use in a way?

BOSS 2010-08-24 18:42:39

canvas is defined in HTML 5. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

meder 2010-08-24 18:44:21

Raphael is different from canvas. Raphael is for SVG/Vector graphics. See http://stackoverflow.com/questions/568136/svg-vs-canvas-where-is-the-web-world-going-towards

meder 2010-08-24 18:48:20

You can also use exCanvas for IE implementations.

meder 2010-08-24 18:48:54

Phew, ok, kind of confusing, but I think I got it! :) But, just wondering, are `<canvas>`'s APIs only defined through JavaScript?

BOSS 2010-08-24 19:03:46

+1 A:

Take a look at Raphaël. This is yet the best project I've seen so far using something similar to canvas (thus supported in all major browsers) and Javascript (JQuery).

Yanick Rochon 2010-08-24 18:05:29

isn't Raphael using SVG ?

jAndy 2010-08-24 18:08:29

yes it does. It also uses VML with Internet Explorer (I'm on Linux, so I don't know nor care much what implementation IE now support... Raphaël works with IE 6+ and this is good enough to me). I corrected my answer because it is effectively misleading. :)

Yanick Rochon 2010-08-24 18:31:28

+1 A:

jQuery is a toolkit to interact and manipulate the DOM plus some extra neat ajax methods. Raphael and/or Protovis are toolkits for visualisation.

Processing.js is a visualisation toolkit specifically for the canvas element.

jQuery has one expertise, other toolkits have other expertise, though it's very much possible to use specialisation toolkits together ;)

BGerrissen 2010-08-24 18:05:43

I like the way you worded that, thanks.

BOSS 2010-08-24 18:27:26

ansaurus

tags:

views:

answers:

Canvas and jQuery?

related questions