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

Question

[kos94ok]

Всем привет! Есть такой код

var c=document.querySelector("canvas");

    var ctx=c.getContext("2d");
    var imageObj1 = new Image();
    imageObj1.src = "background.jpg";

    var imageObj2 = new Image();

    c.width = imageObj1.width;
    c.height = imageObj1.height;

    imageObj1.onload = function() {

       ctx.globalAlpha = 1;
       ctx.drawImage(imageObj1, 0, 0, imageObj1.width, imageObj1.height);
       imageObj2.src = "foreground.jpg";
       imageObj2.onload = function() {
          ctx.drawImage(imageObj2, (imageObj1.width / 2) - (imageObj2.width / 2), (imageObj1.height / 2) - (imageObj2.height / 2), imageObj2.width, imageObj2.height);
          var img = c.toDataURL("image/png");
          $('html').append(img)
          document.write('<img src="' + img + '" style="width: 100%; max-width: 500px;"/>');
       }
    };

В данном коде я пытаюсь наложить два изображения друг на друга. В браузере Safari все отлично работает. В таких браузерах как Google Chrome, Yandex отрисовывается пустое изображение. Почему?

Comments

[historydev]

Не заходите с этих новомодных браузеров, понапридумывали своих хромов, лисиц, зайцев. Вот компас то шо нада, лайк, ещё edge советую, классный браузер, респект майкрасафту или как их там.

Answer 1

[Александр]

- c.width = imageObj1.width;
- c.height = imageObj1.height;

imageObj1.onload = function() {
+   c.width = imageObj1.width;
+   c.height = imageObj1.height;
    ctx.globalAlpha = 1;