Question

I plan to build a game an have everything in mind. I know HTML, CSS and Javascript good and it would give me cross browser support so going to use it for sure.

I have a need where I need to show a div (rectangle) and then upon some action animate it to the other shape which you can better see in this picture

Can I animate DIV element or I would need to use SVG or Canvas otherwise?

Answer 1

For drawing arbitrary shapes in the browser, I would suggest using either Canvas or SVG.

I would avoid trying to ‘drawing’ using HTML <div> elements and CSS. This is possible, but it is a hack at best and can get quite messy, and I certainly wouldn’t want to write a game using this technique.

So your best choices are definitely either SVG or Canvas.

The choice of SVG vs Canvas depends as much on what platforms/browsers you want to support as it does on the properties of the two technologies.

Obviously you already know the main difference between SVG (vector graphics) and Canvas (pixel graphics), but the two have differing browsers support as well, which is important to take into account.

With the limited information you’ve given, I would say that SVG looks like the most natural fit for what you’re doing. However, SVG is not yet supported by the Android browser, so if you want your game to run in mobile devices, you need to take that into consideration. This would probably mean you need to use Canvas instead.

If you’re sticking to the desktop, all modern browsers support both Canvas and SVG. Obviously both are missing from IE8 and earlier, but IE does support a competing format called VML, which is an XML-based vector language similar to SVG.

If you want to support IE8 (and it’s quite possible that you don’t!), there are javascript libraries available for IE which will render both Canvas and SVG graphics using IE’s VML engine. Obviously this works very well for SVG as the two languages are quite similar. I’ve heard slightly more mixed reports about the canvas conversion, but you may want to give it a try. Bear in mind that IE8’s Javascript engine is quite slow, so a javascript-based graphics format conversion may not give you sufficient performance to be useful in the context of a game.

Hope that helps.