views:

83

answers:

3

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
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
*Why* can't you just use canvas's own methods?
meder
I didn't say I couldn't, I'm guessing those are separate from JavaScript completely?
BOSS
jQuery is a library to interact with the DOM. It isn't targeted to abstract canvas's methods.
meder
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
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
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
canvas is defined in HTML 5. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
meder
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
You can also use exCanvas for IE implementations.
meder
Phew, ok, kind of confusing, but I think I got it! :) But, just wondering, are `<canvas>`'s APIs only defined through JavaScript?
BOSS
+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
isn't Raphael using SVG ?
jAndy
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
+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
I like the way you worded that, thanks.
BOSS