Wie erkennt man, wenn ein Canvas für die Manipulation bereit ist?

Question

Ich füge dynamisch X Canvas-Elemente auf einer Seite über jQuery wie folgt:

$(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'); 
    } 

    //... 
}); 

Weder .append() noch .appendTo() haben einen Rückruf, weil sie sofort geschehen soll sind. Leider geschieht etwas über das Element canvas nicht sofort.

Wenn ich auf einem der Canvas-Elemente zu .getContext('2d') gehe, wird es mit "GetContext ist keine Funktion." Dies geschieht sowohl auf FF 3.5 als auch auf Chrome.

Wenn ich den Canvas-Elementen wie .click() und einem beliebigen Ereignishandler zuweisen und in diesem Fall .getContext() verwenden, funktioniert es perfekt.

Wie kann ich effizient feststellen, dass eine Arbeitsfläche für die Bearbeitung bereit ist?

Answer 1

Ich glaube nicht, dass Sie getContext() auf der can Variable verwenden können.

Wenn Sie das tun, versuchen Sie can[0].getContext(). Dies wird tatsächlich das Element-Objekt, nicht jQuery's bekommen.

Answer 2

Zuerst würde ich sehen, ob es einen Fehlerbericht für beide Browser gibt.

In der Zwischenzeit könnten Sie setInterval, oder vielleicht nur eine Schleife, nur um zu überprüfen, ob .getContext (ohne Klammern) wahr ist, und nur weitermachen (mit einem vernünftigen Limit, so dass Sie den Browser nicht mit eine Endlosschleife, wenn etwas schief geht oder ein Benutzer diese Funktion nicht in seinem Browser hat.)

Answer 3

Sie könnten eine Funktion an das Ereignis DOMReady der Zeichenfläche anhängen.