Excanvas para elementos de lienzo creados dinámicamente

Question

Excanvas "for enternet Explorer" funciona bien para los elementos de lienzo predefinidos. Pero cuando se trata de crear elementos de canvas dinámicamente durante el script, no funcionará ...

¿Alguna idea?

Answer 1

De the documentation:

Si ha creado el elemento canvas dinámicamente no tendrá el método getContext añadió al elemento . Para que funcione, debe llamar al initElement en el objeto G_vmlCanvasManager.

var el = document.createElement('canvas'); 
G_vmlCanvasManager.initElement(el); 
var ctx = el.getContext('2d'); 

Answer 2

que lo añaden al documento antes de llamar initElement y funciona para IE8, cromo y ss. Me tomó un tiempo resolverlo.

var foo = document.getElementById("targetElementID"); 
var canvas = document.createElement('canvas'); 
canvas.setAttribute("width", 620); 
canvas.setAttribute("height", 310); 
canvas.setAttribute("class", "mapping"); 
foo.appendChild(canvas); 
canvas = G_vmlCanvasManager.initElement(canvas); 

Answer 3

Creo que he encontrado el truco para esto. IE no sabe qué es un "lienzo", por lo que cuando creas un elemento canvas con tu javascript, no funciona.

Otros ejemplos que he visto hacer esto para crear su lienzo:

var el = document.createElement('canvas');//this doesn't work in IE 

Así que el truco es simplemente engañar a IE mediante la creación de algo legal y llamar a la inicialización de la lona en su lugar.

que utiliza jQuery para hacer un GET ajax para este bloque de HTML que luego se inserta en el DOM:

<div id="canvasholder"> 
    <canvas id="mycanvas" width="1024" height="768" style="width:1024px;height:768px"></canvas> 
</div> 

En el javascript después de la llamada Ajax ha completado y se inserta el código HTML, hago mi inicialización del lienzo. Este es solo el fragmento interesante de mi función init.

... 
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(
    '<div id="mycanvas" width="1024" height="768"></div>'); 
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"); 
... 

Esto ahora me funciona tanto en Firefox como en IE7.