drawImage () не работает

Question

Когда я открываю html-файл в chrome, я вижу только фон, открываю консоль и вижу кадр "hi", но не вижу изображение, которое я "нарисовал" с помощью drawImage () `

var ctx = document.querySelector('Canvas').getContext('2d')

function draw() {
  ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0)
  window.requestAnimationFrame(draw)
  console.log('hi')
}
draw()

#Canvas {
  width: 100%;
  height: 100%;
  background: url(Pictures/Background.jpg);
  margin: -8px;
}

<canvas id='Canvas'></canvas>
<div style='display:none;'>
  <img id='Mario' src='Pictures/Mario.png'>
</div>

Answer 1

Вот ваша проблема:

ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0);

Вы установили ширину и высоту изображения на 0. Вместо этого переключитесь на это:

ctx.drawImage(document.getElementById('Mario'), 0, 0, 50, 61);