how to get the html file of an edited canvas in html5

Question

how to get the html file of an edited canvas in html5

129 Views Asked by Soham Dutta At 11 April 2025 at 01:35

I am trying to make a website which helps its users to create a page by dragging and dropping elements on the canvas. The user should be able to save the html file of the edited canvas. I cannot figure how to convert the changes made to the canvas to an html file.

Original Q&A

There are 3 best solutions below

**jing3142** · Answer 1

Canvas is basically just a bit-map image. Whatever you draw on the canvas is stored as pixels not as elements. So changes to the canvas are just changes in pixel values. To do what you wish you would need to store your 'elements' as 'objects' within your code where each 'object' stores all the required data for your 'element'.

it would then be possible to open a new window and export code into it using document.writeln

The code below may give you an idea of what sort of thing would be needed

newwindow=window.open('','_blank'); 
newwindow.document.writeln('<!DOCTYPE HTML>'); 
newwindow.document.writeln('<html>');
newwindow.document.writeln('<head>');
newwindow.document.writeln('<style>');
newwindow.document.writeln('#element0 {');
newwindow.document.writeln('background:'+ obj0.background+';');
newwindow.document.writeln('width:'+ obj0.width+';');
newwindow.document.writeln ('}');
newwindow.document.writeln('</style>');
newwindow.document.writeln('</head>');
newwindow.document.writeln('<body>');
newwindow.document.writeln('<div id="element0"></div>');
newwindow.document.writeln('</body>');
newwindow.document.writeln('</html>');
newwindow.document.writeln('<html>');
newwindow.document.close();

Hope this helps

**Vignesh** · Answer 2

Vignesh On 10 January 2014 at 12:41

I don't think it's possible to get Markup out of canvas. I've searched it for a month but can't find a valid solution. but may be some experts may know. Best of luck buddy.

**AudioBubble** · Answer 3

Canvas won't help you here for anything other than to visualize the objects you have dropped onto it.

You need to record the objects you drop in a "shadow" structure behind the scene sort of. That is to say: build a object list internally which you then can use as source data to render:

Canvas visualization of it
Raw HTML code from it.

You can for example drop an image to the canvas and your code will record a new object (intention with the following code is to show the principle not to provide a full working solution):

var myObjects = [];

/// a drop occurred
var o = new myElement(x, y, width, height, id, type);

myElement is a pre-defined object that you set up in advance to hold the given arguments.

Then push the object to your object stack and render it to canvas:

myObjects.push(o);

for(var i = 0, o; o = myObjects[i]; i++) {
    /// draw the look of this object here to canvas
}

When you then need a HTML version of it you do the same:

for(var i = 0, o; o = myObjects[i]; i++) {
    var el = '<' + o.type + ' id="' + o.id + ' .... other things here
}

This way you can produce canvas graphics, HTML, send data over a socket etc.

The key in these sort things is to keep raw base data available. In this case it would be the element type you want to drop, its position and dimension. For HTML you also have to consider things as nesting etc. but that would require a bit more code than shown here.

how to get the html file of an edited canvas in html5

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML5-CANVAS

Related Questions in HTML-EDITOR

Trending Questions

Popular # Hahtags

Popular Questions