CODEWITHSUNDEEP
javascripthtmlcanvas
Thomas
Thomas

Reputation: 34188

How to render DIV content on Html5 Canvas

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

Upvotes: 0

Views: 1222

Answers (1)

Bhavesh Parekh
Bhavesh Parekh

Reputation: 212

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

Upvotes: 1

Related Questions