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 petent when it es 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 ponents 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 e 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.

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 petent when it es 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 ponents 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 e 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.

• javascript
• html
• canvas
• svg

• 1 Why can't you use a bination? – Marty Commented Nov 28, 2012 at 0:41
• @Marty - how would that work, by importing SVGs into a canvas? – jonhobbs Commented Nov 28, 2012 at 0:53
• You could simply overlay svg on top of a canvas – Sophie Commented Nov 28, 2012 at 0:58
• 1 As you said SVG libraries were not abundant I just wanted to let you know about raphaeljs. in case you didn't know yet. – Nelson Benítez León Commented Nov 28, 2012 at 1:21
• Maybe I'm confused here but how would it help to layer the svgs over a canvas? I presume you mean absolutely positioning them and making them draggable with a canvas positioned behind them. If that's the case then what is the canvas used for, just drawing a background? – jonhobbs Commented Nov 28, 2012 at 2:19

3 Answers 3

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 plicated 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! :-)

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./kineticjs/html5-canvas-mobile-events/

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

I don't know how plex is your project but you should worry about performance on tablets, because as I saw on some tests that I did on my iPad 2, using some svg mixed with css plus javascript touch events it turned to be not so responsible, and a noticiable laggy.

Canvas may have a lot better performance but, you need to write a management script for almost everything, like storing positions to handle mouse coords and map objects, and you must redraw every change manually. So performance will mainly depends on how optimized will be you canvas management script, I'm not sure if there already any library, the answer is probably yes.

SGV as other said, it is usually slower, but this is because, its not rendered as ordinary bitmap, it is a DOM of vector elements. It's also easy to handle events, you can attach events to any element, (browser implementation dependent), you can apply css to to style, and its easy to change properties like position, size, stroke, fill.

To Tablets: If you choose svg I would avoid using high-resolution textures, don't use css3 box-shadow to svg elements (makes the ipad very laggy), and I would avoid using jquery to manipulate DOM and drag and drop, rather use plain javascript with very optimized code on tablets.