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

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') на одном из элементов canvas, он завершается с ошибкой «getContext не является функцией». Это происходит как на FF 3.5, так и на Chrome.

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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