Как определить, когда холст готов к манипуляциям?

Question

Я динамически добавляю элементы X canvas на страницу с помощью jQuery, вот так:

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

    //...
});

Ни .append () , ни .appendTo () не имеют обратного вызова, потому что они должны произойти немедленно. К сожалению, что-то с элементом canvas не происходит сразу.

Когда я перехожу к .getContext ('2d') на одном из элементов холста, он завершается ошибкой с " getContext не является функцией. " Это происходит как на FF 3.5, так и на Chrome.

Если я назначу произвольный обработчик события для элементов холста, таких как .click () , и использую .getContext () в этом событии, это будет работать отлично.

Как я могу эффективно определить, что холст готов к манипулированию?

Answer 1

Я не думаю, что вы можете использовать getContext () для переменной can .

Если вы делаете это, попробуйте can [0] .getContext () . Это на самом деле получит объект элемента, а не jQuery.

Answer 2

Во-первых, я посмотрю, есть ли отчет об ошибке в этом браузере.

Между тем, вы можете использовать setInterval, или, может быть, просто цикл, чтобы просто проверить, является ли .getContext (без скобок) истинным, и продолжить работу только после этого (с некоторым разумным ограничением, чтобы вы не останавливали браузер с помощью бесконечный цикл, если что-то идет не так или пользователь не имеет этой функции в своем браузере.)

Answer 3

Вы можете прикрепить функцию к событию DOMReady на холсте.