Uncaught TypeError: canvas.getContext is not a function

Question

у меня есть такой HTML:

<body>
    
    <div>
        <canvas
            id='game'
            width='600px'
            height='400px'
            style='
                margin: auto;
                margin-top: 40px;               
                display: block;
                background-color: #252734;
                box-shadow: 0 0 10px rgba(0,0,0,0.5);
            '
        /></canvas>
        <script src='game.js'></script>
    </div>
</body>

И такой JS:

const canvas = document.getElementById("game");
const ctx = canvas.getContext('2d');

И ошибка:

Answer 1

У вас поиск идет по селектору #game, а canvas имеет идентификатор #wornet, поэтому вы пытаетесь получить функцию, которой нет у данного элемента.

Еще бывает так, что на странице может не быть элемента с id в момент выполнения document.getElementById("SELECTOR");. Избавиться от такой ошибки можно будет путём отрисовки страницы целиком и только потом искать элемент. Для ожидания загрузки страницы можно использовать слушателя на событие load

window.addEventListener('load', YOUR_CALLBACK);

UPD Если у вас два одинаковых id, тогда берётся первый попавшийся и это опять же будет div, а не canvas. Нельзя (сильно не рекомендуется) делать больше одного уникального id на странице

Также почините html. Закрывающий / у вас стоит в открывающем теге

const canvas = document.getElementById("game");
const ctx = canvas.getContext('2d');

<div>
  <canvas id='game' width='600px' height='400px' style='
                margin: auto;
                margin-top: 40px;               
                display: block;
                background-color: #252734;
                box-shadow: 0 0 10px rgba(0,0,0,0.5);
            '></canvas>
  <script src='game.js'></script>
</div>

БЛОГ НА HUSL

Uncaught TypeError: canvas.getContext is not a function

Ответы (1 шт):