¿Cómo detectar cuándo un lienzo está listo para la manipulación?

Question

Estoy agregando dinámicamente elementos de lienzo X a una página a través de jQuery así:

$(document).ready(function() { 
    for(i=0;i<4;i++) {
        var can = $(document.createElement("canvas"))
                   .attr("id","table"+i)
                   .addClass("table")
                   .attr("width",640)
                   .attr("height",480)
                   .appendTo('#container');   
    }

    //...
});

Ni .append () ni .appendTo () tienen una devolución de llamada, porque se supone que suceden de inmediato. Desafortunadamente, algo sobre el elemento del lienzo no sucede de inmediato.

Cuando voy a .getContext ('2d') en uno de los elementos del lienzo, fallará con "getContext no es una función". Esto sucede en FF 3.5 y Chrome.

Si asigno un controlador de eventos arbitrario a los elementos del lienzo como .click () , y uso .getContext () en ese evento, funciona perfectamente.

¿Cómo puedo determinar eficientemente que un lienzo está listo para la manipulación?

Answer 1

No creo que pueda usar getContext () en la variable can .

Si está haciendo eso, intente can [0] .getContext () . Esto realmente obtendrá el objeto elemento, no el de jQuery.

Answer 2

Primero, vería si hay un informe de error en esto para cualquiera de los navegadores.

Mientras tanto, puede usar setInterval, o tal vez solo un bucle, para verificar si .getContext (sin corchetes) es verdadero, y solo proceder después de que lo sea (con un límite razonable para que no bloquee el navegador con un bucle infinito si algo sale mal o un usuario no tiene esa función en su navegador.)

Answer 3

Puede adjuntar una función al evento DOMReady del lienzo.