Почему не выводится изображение на canvas?

Question

<!DOCTYPE html>
<html>
 <head>
 </head>

 <body>
  <canvas id="canvas">
 </body>

 <script type="text/javascript">
  const canv = document.querySelector('#canvas')
  const context = canv.getContext('2d')
  const image = new Image()
  image.src = "../img/image/main.png"
  context.drawImage(image, 0, 0)
 </script>

</html>

Самое интересное, что когда я закомментировал этот код и вставлял каждую команду в консоли, то всё нормально работает, а через код оно вообще не работает. Даже в консоли ничего не выводится.

Answer 1

Благодаря ценной (для меня подсказке :-) от @Leonid'a попробовал сделать загрузку сразу трех изображений вместо одного.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var loaded = 0;
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();

img1.src = "https://i.stack.imgur.com/81Os1.jpg";
img2.src = "https://i.stack.imgur.com/z57xC.jpg";
img3.src = "https://i.stack.imgur.com/FPcfs.jpg";

img1.onload = drawImages;
img2.onload = drawImages;
img3.onload = drawImages;

function drawImages() {
  loaded += 1;

  if (loaded === 3) {
    context.drawImage(img1, 10, 100, 300, 300);
    context.drawImage(img2, 300, 100, 300, 300);
    context.drawImage(img3, 600, 100, 350, 300);
  }
}

<canvas id="myCanvas" width="1200" height="600"></canvas>

БЛОГ НА HUSL

Почему не выводится изображение на canvas?

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