<canvas> в жировой муке

Question

Я создал <canvas> в переменной canvas, но я не могу его нарисовать. Я вижу пустой холст на странице, но он пустой.

alert(ctx);
ctx.fillStyle = "rgb(50,50,50)";
ctx.fillRect(10,10, 55,50);
alert("done");

Первое предупреждение говорит [object CanvasRenderingContext2D], и я вижу предупреждение "Готово", но холст все еще пуст. В консоли ошибок нет соответствующих ошибок.

edit: просто чтобы убедиться, я вставил скрипт в отдельную html-страницу, и он работал как положено

Answer 1

У меня отлично работает Canvas в Greasemonkey.Разместите свой скрипт Greasemonkey;а какой браузер вы используете?

Answer 2

Я выяснил, в чем проблема, и я не уверен, действительно ли это проблема в firefox / greasemonkey.

Прежде всего, сценарий написан дляна частном сайте, вам нужно было бы пригласить, чтобы увидеть страницу, на которой он находится, поэтому я опубликовал то, что, по моему мнению, было важной частью сценария, но оказалось, что это не так.

Проблема былачто после создания холста я изменил (+ =) .innerHTML содержимого div (что я знаю, это плохая практика, но это работает для greasemonkey, который не должен работать в каждом браузере).Я предполагаю, что это полностью разрушит предыдущее дерево, а затем заново создаст его с новой заданной строкой содержимого, что будет означать, что холст, на который я ссылался, больше не был тем, который отображался на странице, это был тот, который былвоссоздан, поэтому мое упоминание было бессмысленным, и поэтому, когда я обратился к нему, я не получил никакой ошибки, но ничего не увидел.Я полагаю, что, если бы я использовал эту ссылку, чтобы добавить ее обратно на страницу, я бы увидел то, что нарисовал.

Проблема была исправлена ​​не добавлением в .innerHTML, я думаю, что если я используюправильные методы DOM для создания div, который я хочу добавить, и затем добавить его в дерево, у меня не должно быть этой проблемы (хотя я еще не проверял это).