В JavaScript, в простом примере нет отрисовки с "canvas"

Question

Уже пробовал писать простейшую игру на JS, там всё работало как часы, сейчас начал писать другую, написал уже основные функции, решил проверить отрисовку фона в canvas и столкнулся с тем, что отрисовки нет. Почистил код от всего, что не связано с фоновой картинкой и canvas - ом, но отрисовки всё равно нет!

<html>

<head>
  <title>Кости</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    body {
      background: #29272F;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .img {
      position: absolute;
      top: -1000px;
    }
    
    canvas {
      border: 3px solid white;
    }
  </style>
</head>

<body>
  <canvas width="600" height="600" id="game"></canvas>
  <img class="img" id='bg' src="img/bg.png">

  <script>
    var canvas = document.getElementById('game');
    var context = canvas.getContext('2d');
    var bg = document.getElementById('bg');

    context.drawImage(bg, 0, 0); //Отрисовка фона
  </script>
</body>

</html>

Картинка "bg.png" лежит в указанном каталоге и при наведении курсора на её код в "Brackets" - она отображается.

Answer 1

Это все потому что вы очень спешите. Дождитесь загрузки изображения.

const canvas = document.getElementById('game')
const context = canvas.getContext('2d')
const bg = document.getElementById('bg')
bg.onload = () => {
  context.drawImage(bg, 0, 0)
}

БЛОГ НА HUSL

В JavaScript, в простом примере нет отрисовки с "canvas"

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