Почему не отображается изображение после наложение на canvas?

Question

есть код

var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 
            var img = new Image();
			var imgT = new Image();
			
            img.src = "https://img.rosbalt.ru/photobank/1/c/a/0/Z8X2VMCx.jpg";
			imgT.src = "http://zabavnik.club/wp-content/uploads/background_html_1_16082041.jpg"
            img.onload = function() {
                 
                context.drawImage(img, 0, 0);
				context.drawImage(imgT, 300, 400,200,200);
				
            };
			console.log("url-final-  "+canvas.toDataURL());

  <canvas id="myCanvas" width="1000" height="1000"
            style="background-color:#eee; border:1px solid #ccc;">
            
        </canvas>

На выводе в console.log выводится все что есть в Canvas в base64 img, при конвертация в png получается голое фото 1000x1000, но по идей должно быть две фото (одна поверх другой) почему их нету в финалином результате?

Answer 1

Потому что вы ждете загрузки только одного изображения. Второе не успевает еще загрузиться.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var timer;
var loaded = [];
var img = new Image();
var imgT = new Image();

img.src = "https://img.rosbalt.ru/photobank/1/c/a/0/Z8X2VMCx.jpg";
imgT.src = "http://zabavnik.club/wp-content/uploads/background_html_1_16082041.jpg"

img.onload = loaded.push('img');
imgT.onload = loaded.push('imgT');

timer = setInterval(function(){
  if ( loaded.length == 2 ) {
    context.drawImage(img, 0, 0);
    context.drawImage(imgT, 300, 400, 200, 200);
    clearInterval(timer);
  }
}, 300);

<canvas id="myCanvas" width=1000 height=1000></canvas>

БЛОГ НА HUSL

Почему не отображается изображение после наложение на canvas?

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