@kos94ok

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

Всем привет! Есть такой код
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 отрисовывается пустое изображение. Почему?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
- c.width = imageObj1.width;
- c.height = imageObj1.height;

imageObj1.onload = function() {
+   c.width = imageObj1.width;
+   c.height = imageObj1.height;
    ctx.globalAlpha = 1;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы