Javascript 如何在Html5画布上呈现DIV内容

我得到了一个可以在画布上呈现div内容的代码，但很多地方我就是不明白。所以请引导我。这是我得到的密码

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); }

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“data:image/svg+xml，”+
"" +
"" +
"" +
“
你好
托马斯
”+
"" +
"" +
"";
var img=新图像（）；
img.src=数据；
img.onload=function（）{ctx.drawImage（img，0，0）；}

1）

data:image/svg+xml的含义是什么
2） 

3） 什么是

如果可能，请解释其含义和用法

另一个最重要的问题是画布和浏览器兼容性问题
我们知道许多浏览器版本不支持html5画布，在这种情况下，我们可以回退并加载flash画布

因此，请指导我如何加载flash画布，最重要的是在flash画布上绘制或渲染div内容

寻找详细的指导。感谢
当svg元素不是根元素时，可以使用它在当前文档（可以是HTML文档）中嵌套一个独立的svg片段。这个独立片段有自己的视口和坐标系。




foreignObject元素允许包含一个外来XML名称空间，该名称空间的图形内容由不同的用户代理绘制。包含的外来图形内容要经过SVG转换和合成

你可以从这个链接中找到来源“我们知道很多浏览器版本不支持html5画布”这是不正确的-事实上现在大多数浏览器都支持画布。旧版本的浏览器不支持。在这种情况下，我想加载flash画布，并想在flash画布上绘制div内容……有什么想法吗？谢谢，但画布和浏览器兼容性问题如何？我们知道，许多浏览器版本不支持html5画布，在这种情况下，我们可以回退并加载flash画布。在旧浏览器中，没有其他方法使用画布。目前，使用flashcanvas是正确的。或者这和FlashCanvas是一样的。你的答案需要一个警告：当前的安全规则越来越不允许使用foreignObject捕获其他域资源。Mozilla可能仍然允许，但大多数浏览器不允许。