A canvas object in jQuery, is it possible?

Question

I intend to make a browser game with jQuery, I would need a canvas object in which I can place many visual elements and animate them to some extend. Is this entirely possible with just jQuery? Some may point to HTML5 canvas but it's specification isn't complete so I'm not too fond of it.

Answer 1

So you want to have HTML5 canvas without HTML5 canvas? I'm afraid that's not possible.

Answer 2

If you're going to do a browser game, you don't necessarily need canvas. It actually depends on how you want to represent your objects graphically. If you're going to use sprites, you can make divs or imgs your sprites, and move them around using css absolute positioning, for example.

But no, you can't just go drawing lines on a canvas in any meaningful way. So, to sum up, you can make Pac-Man, but you can't readily make Star Wars.

Answer 3

It's very easy to make a canvas object with jQuery. Use

$("<canvas>");

That creates an object of HTMLCanvasElement which you can append to the page. jQuery is a JavaScript library, and to write a canvas based game, you need to code in JavaScript. There may be wrappers for jQuery available but I would recommend you use the right tool for the job instead of jQueryifying everything. Checkout these libraries:

• http://processingjs.org/
• http://raphaeljs.com/
• http://www.c3dl.org/

Answer 4

Actually I think html 5 canvas is exactly what I need. People say it's complex but I found out it's just like other graphic APIs.

Answer 5

The best use of canvas for creating a game-like interface that I've seen actually uses YUI, but in my own projects, I can tell you that this is possible with jquery as well.

See http://ernestdelgado.com/articles/ddwdd/

The interaction here is really only having a canvas where you can drop objects that can be manipulated by the user via dragging, rotating, and resizing. If you're interested more in animating objects, you might want to look at impactJs.org