Home/ Questions/Q 8906109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:34:00+00:00

I’m about to start work on a room designer project which will allow you

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0