Canvas or SVG for room designer project

Question

I'm about to start work on a room designer project which will allow you to drag and drop walls/doors/furniture etc onto a grid to design a room. I've decided that dragging and dropping transparent PNGs and absolutely positioning them isn't going to work and I don't want to use flash, so it's Canvas or SVG.

ME: I have never used Canvas or SVG before but I'm very competent when it comes to javascript and jQuery (I'm ok ith OO Javascript, anonymouse functions, closures, callbacks etc) and I've read Douglas Crockford's "Javascript: The Good Parts" and understood most of it ;-)

The Project - requires drag and drop from a components window to a designer window, needs to work on a tablet (not phone) so touch events are a concern. Also requires tooltips, layering of objects etc. If I did use vector graphics then they'd need to have bitmapped textures anyway (e.g. a wall panel might have a wallpaper texture)

So far, I've read a book on Canvas and have come to the following conclusions...

Canvas

• Fast
• Fairly simple to get your head round redrawing objects on the canvas
• No idea bout mouse events yet
• Libraries like EaselJS, FabricJS and KinectJS look good.

SVG

• Scalable (easier to build a zoom function)
• Easy to import graphics from something like illustrator.
• Drawing libraries don't look as abundant/good.
• No idea bout mouse/touch events.

So, I need to work out how to do this pretty soon. Right now I'm leaning towards Canvas and a good library as I believe some of them can import SVGs for scalability anyway.

Any advice on which direction to go would be very much appreciated.

Answer 1

For my money, I would definitely choose SVG if possible (but I do have more experience of SVG). It seems like it's made for 3D rendering applications. For one thing, it's an entire DOM - so it handles the rendering and z-ordering for you (without any need for any repainting, etc.), and most importantly - provides much of the object model itself. With canvas you have to create more of an in-memory model to handle the rendering of everything. With SVG you just won't need to worry about masking, moving, transforming, zooming or rendering anything. Obviously, it gets more complicated if objects intersect/overlap in 3D space - but that's true with either approach. At least SVG shoulders most of the burden for you.

But performance-wise, I couldn't say definitively. It would depend on what your app was doing. I don't think touch events should be the deciding factor - you'll find a way, even if it means overlaying a transparent canvas. Whether touch events are supported by SVG may also be device/browser dependent - but I haven't explored this.

But canvas - what is that doing for you? It's a bitmap, that's all it is. Give me a beautifully powerful DOM rather than an blob of memory, any day.

But it's just my opinion! :-)

Answer 2

I would think the best solution is to use canvas to represent the grid and the room. And then for the items in the room, use svg on the canvas. If your using transparent png files for the furnishings, then you dont need svg at all, but if you use svg, then you can scale to much larger, not just slightly larger.

One issue your going to have with mobile is the memory issue, if you have a lot of items on the page, and they are pngs, that might be an issue.

If your doing "drag and drop" but doing so on a canvas, then you do not actually need a javascript drag and drop library, just handle the touch events.

a link for touch events : http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/

and a link about touch events : Javascript Drag and drop for touch devices