Canvas getContext ( "2d" ) возвращает null

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

Я опубликую то, что у меня есть на данный момент, но я попытался сделать это с помощью свойства jQuery, html onLoad и т.д.

var cvs, ctx, img;
function init() {
   cvs = document.getElementById("profilecanvas");
   ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
   img = document.getElementById("profileImg");
   drawImg();
}

function drawImg() {
   ctx.drawImage(img, 0, 0);
}

window.onload = init();

Идентификаторы верны и соответствуют соответствующим тэгам canvas и img. Тем не менее, я продолжаю получать TypeError: 'null' is not an object (evaluating 'cvs.getContext'), и, похоже, он больше не идет. Я уверен, что это некоторая ошибка ID10T, но я надеюсь, что кто-то может дать мне ключ к тому, что вызывает это? Спасибо.

Изменить: Итак, теперь это работает, используя <body onload="init()">. Тем не менее, он отображается только иногда, и если я пытаюсь запустить init() off $(document).ready() или document.onload, мне все равно не повезло и получите ошибку. Любые мысли?

Ответ 1

Когда вы это сделаете:

window.onload = init();

функция init() будет выполнена немедленно (что вызывает ошибку, потому что getContext() вызывается слишком рано, т.е. перед загрузкой DOM), а возвращаемое значение init() будет сохранено в window.onload.

Итак, вы действительно хотите это сделать:

window.onload = init;

Обратите внимание на отсутствующий ().

Ответ 2

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

Например:

var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null

То же самое верно, если вы измените порядок вызовов.

Ответ 3

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

Ответ 4

Это не имеет никакого отношения к актуальному вопросу, но поскольку этот вопрос является первым результатом при поиске в googling getContex("2d") null Я добавляю решение проблемы, которую я имел:

Убедитесь, что вы используете getContext("2d"), а не getContext("2d") - обратите внимание на нижний регистр d.