Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think I've found the trick to this. IE doesn't know what a "canvas" is, so when you create a canvas element with your javascript, it doesn't work.</p> <p>Other examples I've seen do this to create their canvas:</p> <pre><code>var el = document.createElement('canvas');//this doesn't work in IE </code></pre> <p>So the trick is to just fool IE by creating something legal and calling the canvas initialization on it instead.</p> <p>I used jquery to do an ajax GET for this block of html which I then inserted into the DOM:</p> <pre><code>&lt;div id="canvasholder"&gt; &lt;canvas id="mycanvas" width="1024" height="768" style="width:1024px;height:768px"&gt;&lt;/canvas&gt; &lt;/div&gt; </code></pre> <p>In the javascript after the ajax call has completed and the HTML is inserted, I do my canvas initialization. This is just the interesting snippet from my init function.</p> <pre><code>... canvas = $('#mycanvas').get(0);//get dom element from jquery if(!canvas.getContext)//function doesn't exist yet { //we're in IE if we reach this block //otherwise getContext already exists $('#canvasholder').empty(); //add #mycanvas as a div instead of a canvas //you could use document.createElement('div') instead of jquery $('#canvasholder').append( '&lt;div id="mycanvas" width="1024" height="768"&gt;&lt;/div&gt;'); canvas = $('#mycanvas').get(0); if(typeof G_vmlCanvasManager != 'undefined' ) { canvas = G_vmlCanvasManager.initElement(canvas); } } //now you're set up to draw! context = canvas.getContext("2d"); ... </code></pre> <p>This is now working for me in both Firefox and IE7.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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