Databases
StackOverflow2013
Postsdbo
POforeignobject is not working in IE10
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POforeignobject is not working in IE10
    text
    copied!<p>I want to draw HTML text in canvas using foreignobject element, In MDN i can see the below link (see reference), this is working fine in Chrome and Mozilla browser but not in IE10, I am using IE10.</p> <p>Browser Mode: IE10 &amp; Document Mode: Standards </p> <p>Reference: <a href="https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas">https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas</a></p> <p>Error:</p> <pre><code>DOM7000: Access Denied. Resource access is restricted for cross-origin URL: 'blob:7C72C95F-3E3F-4CD6-804C-C2D8CCC06283'. </code></pre> <p>file:</p> <p>Below is the code snippet : -</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt;&lt;canvas id="canvas" style="border:2px solid black;" width="200" height="200"&gt;&lt;/canvas&gt; &lt;script&gt; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var data = "&lt;svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'&gt;" + "&lt;foreignObject width='100%' height='100%'&gt;" + "&lt;div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'&gt;" + "&lt;em&gt;I&lt;/em&gt; like &lt;span style='color:white; text-shadow:0 0 2px blue;'&gt;cheese&lt;/span&gt;" + "&lt;/div&gt;" + "&lt;/foreignObject&gt;" + "&lt;/svg&gt;"; var DOMURL = self.URL || self.webkitURL || self; var img = new Image(); var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); }; img.src = url; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload