How to render DIV content on Html5 Canvas

Question

i got a code which may render div content on canvas but many area i just do not understand. so guide me. here is the code which i got it.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>" +
                "<ul> <li style='color:red'> hello </li>  <li style='color:green'>thomas</li> </ul> "  +   
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

1) what is the meaning of data:image/svg+xml 2) what is the meaning of <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>

3) what is <foreignObject width='100%' height='100%'>

if possible please explain their meaning & usage.

another most important issue that Canvas & browser compatibility issue we know that many browser version do not support html5 Canvas and in that case we can fallback and load flash canvas

so guide me how to load flash canvas and also the most important is to draw or render div content on flash canvas.

looking for guidance in detail. thanks

Answer 1

When it is not the root element, the svg element can be used to nest a standalone SVG fragment inside the current document (which can be an HTML document). This standalone fragment has its own viewPort and its own coordinate system.

The foreignObject element allows for inclusion of a foreign XML namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

you can find source from this link https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas