Question

I am currently creating a website builder so users can drag and drop elements onto the page and resize elements and modify colors etc.

I am wondering if it could be done via a HTML5 canvas so that events can be dragged about etc and then when the user is happy with this view in the canvas I can then somehow convert this canvas drawing to HTML and CSS. Is this possible?

If so how? And can anyone point me to any examples of this? Or any better ways?

Answer 1

Generally when you find apps that do this for wireframes and whatnot, they don’t generate very usable HTML. Not sure of your exact intentions though:

1 Using Canvas:

Look at http://www.kineticjs.com/ for adding events to elements you have drawn onto a canvas, for resizing, and moving elements. Converting canvas to html though would be no easy task, in fact you would pretty much just end up with point #2 I assume.

2 Using plain html/css/js:

You add position: absolute to every element, this way everything can be dragged around, you can specify z-index to specify whether it shows above or below another element. You can copy the HTML out quite easily as its just copying the current source. If this however is supposed to be used as a way to generate decent html, that someone would actually use on their site, not just as a wireframe/mockup, then this approach would not be great.

I cant imagine a case though where you could use a designer purely to make HTML that is maintainable and neat.