Getcontext 2d ошибка

I’ve tried this a few different ways, but I keep getting stuck with the same error. I’ve loaded an image to canvas before, but since I updated Safari a few days ago, I’m getting errors.

I’ll post what I have at the moment, but I’ve tried doing it with jQuery, html’s onLoad property, etc.

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();

The IDs are correct and correspond to appropriate canvas and img tags. However, I keep getting TypeError: 'null' is not an object (evaluating 'cvs.getContext') and it doesn’t seem to be getting any further. I’m sure it’s some ID10T error, but I’m hoping someone can give me a clue as to what’s causing this? Thank you.

Edit:
Okay, so this seems to work using <body onload="init()"> now. However, it only displays occasionally, and if I try to run init() off of $(document).ready() or document.onload I still have no luck, and receive the error. Any thoughts?

Источник

getContext(«2D») не работает: причины и решения

Если вы занимаетесь разработкой веб-приложений или игр, вероятно, вы сталкивались с проблемой, когда getContext(«2D») не работает. В данной статье мы рассмотрим причины этой проблемы и возможные способы ее решения.

1. Неправильный доступ к элементу canvas

Одна из самых распространенных причин, по которой getContext(«2D») не работает, — неправильный доступ к элементу canvas. Проверьте, что на вашей странице присутствует элемент canvas.

Например:

<canvas id="myCanvas" width="300" height="150"></canvas>

Теперь необходимо получить доступ к этому элементу. Для этого мы используем JavaScript и метод getElementById:

var canvas = document.getElementById("myCanvas");

Теперь мы можем использовать метод getContext для получения контекста рисования:

var ctx = canvas.getContext("2d");

Если вам попадается ошибка «Cannot read property ‘getContext’ of null», значит, вы пытаетесь получить контекст рисования до того, как страница полностью загрузилась. Для решения данной проблемы следует переместить скрипт, который использует метод getContext, в конец файла или использовать событие window.onload.

2. Неправильно написанный метод getContext

Вторая наиболее распространенная причина, по которой getContext(«2D») не работает, — неправильно написанный метод getContext. Он должен быть написан именно так — с учетом регистра:

var ctx = canvas.getContext("2d");

Если вы напишете его не с учетом регистра, то получите ошибку:

var ctx = canvas.getContext("2D"); // ОШИБКА!

3. Другой контекст рисования

getContext(«2D») используется для получения 2D-контекста рисования. Однако, в HTML5 появилось несколько новых контекстов рисования. Если вы хотите использовать другой контекст, например, 3D-контекст (WebGL), используйте соответствующий метод, например, getContext( «webgl» ).

Вот пример:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("webgl");

Полный список контекстов рисования:

— «2d» — 2D контекст рисования (стандартный);
— «webgl» — 3D контекст рисования (WebGL);
— «webgl2» — более современная версия WebGL;
— «bitmaprenderer» — контекст рисования для отрисовки битовых карт.

4. Проблемы с библиотеками и фреймворками

Если вы используете библиотеки или фреймворки, возможно, что они повлияли на работу getContext(«2D»). Возможно, они переопределили настройки для canvas или использовали другие контексты рисования.

Для решения проблемы, первым делом, попробуйте удалить библиотеки и фреймворки, и проверьте работу вашего скрипта.

Если после этого getContext(«2D») продолжает не работать, возможно придется использовать другую библиотеку или фреймворк.

5. Проблемы с браузером

Если вы убедились, что все приведенные варианты не помогают решить проблему, возможно проблема в браузере. Некоторые старые браузеры не поддерживают метод getContext(«2D») .

Убедитесь, что вы используете поддерживаемую версию браузера.

6. Конфликт имен

Возможно у вас есть проблема с наименованием виджета, javascript метода или своего же созданного объекта методом (get/set) getContext .

7. Проблемы на сервере

В некоторых случаях getContext(«2D») не работает из-за проблем на сервере, например, если вы используете ресурсы, хранящиеся на другом сервере и не являющиеся доступными для текущего домена.

Для решения этой проблемы серверные настройки могут быть настроены для обеспечения доступа к этим ресурсам.

8. Проблемные фалы CanvaTools.js

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

В заключении, не работает метод getContext(«2D») может иметь несколько причин, и, вероятно,основная причина — это зависит от качества кода, который вы пишете. Если вы следуете основным правилам и используете подходящие методы, то сможете решить эту проблему.

Источник

Вопрос:

Я пробовал это несколько разных способов, но я продолжаю застревать с той же ошибкой. Я загрузил изображение в холст раньше, но, так как я обновил 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, мне все равно не повезло и получите ошибку. Любые мысли?

Лучший ответ:

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

window.onload = init();

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

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

window.onload = init;

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

Ответ №1

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

Например:

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

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

Ответ №2

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

Ответ №3

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

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

Источник

I wrote an Html file that contains some javascript code. It is an Html5 file, so I add a canvas in the Html source code and get the canvas context object with the code move_canvas.getContext(‘2d’);. But when I browse the Html5 file in a web browser, it shows the error message Uncaught TypeError: move_canvas.getContext is not a function in the browser inspector console, this article will tell you how to fix it.

1. How To Debug & Fix The Canvas.getContext Is Not A Function Javascript Error.

  1. Open the Html file in a web browser such as Google Chrome.
  2. Right-click the web page screen in the web browser, then click the Inspect menu item to open the browser inspector.
  3. Click the Sources tab on the inspector, then select the javascript js file or Html file below the Sources tab.
  4. Click the first column in the js code to set a breakpoint at the code that throws the canvas.getContext is not a function error.
  5. Now run the javascript code until it stops at the breakpoint.
  6. Hover the mouse pointer on the canvas object, it will show you the Html object attributes list with the title canvas#move-canvas.
  7. The text before the # charactor is the Html element type, it should be canvas because we just add the canvas object.
  8. The text after the # charactor is the Html element id.
  9. In my example, the Html element debug info is input#move-canvas.
  10. From the above info, we can see the Html object is an input element in my example, it is not a canvas element.
  11. The Html input element has the same id as the canvas element, and the input element does not have the getContext() function.
  12. Then when it runs to the code line canvas.getContext(‘2d’);, it will throw the error Uncaught TypeError: move_canvas.getContext is not a function because the Html input element doese not have the getContext(‘2d’) function.
  13. After I change the input element’s id to a different one from the canvas element’s id, the error has been fixed.
  14. I also find another signal that can be used to find the cause, that is when I assign the width or height value to the canvas object ( canvas.width = canvasWidth; ), the canvas object’s width is always 0 because the Html input element does not support the width attribute.

Источник

I’ve read this and this but there’s no solution for my problem. If I create a canvas with jQuery then recall it through document.getElementById() i can call getContext('2d') and it works. Like this:

var ctx =
    $('<canvas />')
    .attr({
        id: 'canvasMenuSmall',
        width: '500px',
        height: '500px'
    })
    .appendTo('body');
var c=document.getElementById("canvasMenuSmall"),
    ctx=c.getContext('2d');

But if I try to immediately call getContext('2d') on the object it doesn’t work with the error Uncaught TypeError: undefined is not a function:

var ctx =
    $('<canvas />')
    .attr({
        id: 'canvasMenuSmall',
        width: '500px',
        height: '500px'
    })
    .appendTo('body')
    .getContext('2d'); // error raised

How comes?

Community's user avatar

asked Aug 16, 2014 at 14:45

Olivier Pons's user avatar

Olivier PonsOlivier Pons

15.4k26 gold badges117 silver badges213 bronze badges

Your code does not work because you’re trying to getContext of jQuery, not the DOM element. Don’t chain getContext to the appendTo, but rather, use jQuery to get the element.

The working statement would be

$().appendTo("#place")[0].getContext()

rather than

$().appendTo("#place").getContext()

answered Aug 16, 2014 at 14:51

Ivan's user avatar

5

.getContext('2d') is not a jQuery related stuff… It a method of a dom object.

.getElementById() returns a dom element, that’s why it works there.

answered Aug 16, 2014 at 14:51

Oliboy50's user avatar

Oliboy50Oliboy50

2,6613 gold badges27 silver badges36 bronze badges

Источник

Понравилась статья? Поделить с друзьями:
  • Genshin impact ошибка 502
  • Getcontact код ошибки 5001
  • Genshin impact ошибка 31 4302 honor
  • Genshin impact код ошибки 9907
  • Get kernel port maui meta ошибка