Generate html from a pre-rendered canvas element or component such as textbox?

Question

I am learning JavaScript and HTML5 and out of curiosity wondered:

1) Is it possible to generate HTML from a Canvas element (s)? So for example we have a Canvas shape, on the click of a button it generates the html5 code that rendered it?

2) We have a HTML DOM button on the page, converting this into its' html5 code?

Thanks

Answer 1

1.

No, canvas is just a bitmap.The browser is blissfully unaware of what shape was just drawn. To be able to convert shapes to HTML consider canvas just a view-port or rendition of the shapes you store internally as objects. See your internal objects as the root, then you can produce HTML, bitmap (canvas), SVG, JSON etc. from that very root. Canvas becomes just one channel of representing those data, not the source of it.

You can extract the content of the canvas as an image by calling:

dataUri = canvas.toDataURL();

or as a pixel array :

buffer = context.getImageData(x, y, w, h).data;

Note that in both of these cases CORS restrictions apply.

2.

There is a simple way of getting a current snapshot of the element's HTML:

/// assuming you have obtained the element
var html = button.outerHTML;

But it can easily get more complicated if you have applied a lot of external CSS to the element and so forth.