CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
gopi1410
gopi1410

Reputation: 6625

Which one is better, using plain html with javascript or a canvas?

I have been recently into developing more with html5 canvas & as I see, it is more of JavaScript. So when should it be preferred over plain html? All I want to know is that given that I have to develop a game say like pacman, which one should be better to use? (May be for drawing applications canvas is a lot more helpful than using divs)

For example here are two implementations of pacman

I would like to know the pros and cons of developing a browser game with canvas & with html div's and js. Also I want to know when is it better to use canvas & when is it better to use plain html & js.

Upvotes: 3

Views: 1344

Answers (5)

Christoph
Christoph

Reputation: 51191

Perhaps SVG might be an option for you? It is not as messy as pure html, which is not suited for games, but provides better browser-support. There is also a good framework for SVG: Raphael. I myself used SVG for some game-implementations. (risk, tetris...)

Upvotes: 0

Neil
Neil

Reputation: 8111

I believe one of the major distinctions between the use of canvas or html (dom) for something like a game is the trade-off between the dom helping you to mangage your objects by providing the mouse events to hook, or you managing them in JavaScript yourself.

You need to handle all the mouse events yourself if you use canvas for a game, there are libraries to help you do this, one such library is EaselJS. This library will help you to easily add listeners to your objects in canvas.

Obviously not needing to have all your objects in the dom, you get a massive performance benefit if you require any scrolling etc. Take the Google Maps fusion tables layers as an example, they can render 1000s of markers on the map using canvas and maintain a great user experience, this was something that just wasn't possible when using the dom.

So its all about the trade-off, libraries and more code to manage your objects in canvas - but reap performance rewards, or ease of development in html (dom), but possible performance hits for many objects.

Upvotes: 2

Willem Mulder
Willem Mulder

Reputation: 13994

HTML and DOM for graphics are slow, but they will work in older browsers.

Canvas is very fast, but does only work in modern browsers.

So, if your target group is modern smartphones or modern browsers, then definitely go for canvas! Moreover, if you need certain special effects or particles, then there will be no other way than to use Canvas, since this cannot really be done with the DOM.

Upvotes: 0

MirrorMirror
MirrorMirror

Reputation: 188

For a simple 2D game I would go the canvas way.

For 3D games you will have to take a look at WebGL ( which is a native browser implementation of opengl ) and probably a webgl engine like copperlicht which will wrap the webgl api for you. You can also do 2D games with WebGL, and if your 2D game is graphics heavy, webgl would be faster than canvases.

Of course there is also the Flash solution, but I would not go that way.

edit: theoretically you can also make 3D games with just canvases but that would mean reinventing the wheel ( transformations etc. )

Upvotes: 0

Alnitak
Alnitak

Reputation: 339786

if backwards compatibility isn't a concern, use a <canvas>, this is exactly what they were designed for.

An array of pixels is far more efficient than creating a DOM element for every single dot on the page.

Upvotes: 3

Related Questions