Я не могу загрузить внешнее изображение на холст

Question

У меня есть код JavaScript.

 <canvas id="view" width="120" height="120">
  błąd
 </canvas>
 <script>
 var _view = document.getElementById("view");
 if(_view.getContext) {
  var canvas = _view.getContext("2d");
  var img = new Image();
  img.src = "fajnetlo.png";
  canvas.drawImage(img, 0, 0, 50, 50, 0, 0, 50, 50);
 }
 </script>

На холсте изображение не отображается. Изображение и файл находятся в одном каталоге. Веб-браузер прямоугольник и т. Д. Рисунок, или изображение нет. Почему?

Answer 1

Сделайте drawImage в обратном вызове onLoad изображения.Цитата MDN:

Когда этот скрипт выполняется, изображение начинает загружаться.Попытка вызвать drawImage до того, как загрузка изображения будет завершена, приведет к появлению gecko 1.9.2 и более ранних версий и ничего не будет делать в Gecko 2.0 и более поздних версиях.Поэтому вы должны использовать обработчик события onload:

var img = new Image();   // Create new img element
img.onload = function(){
    // execute drawImage statements here
}; 
img.src = 'myImage.png'; // Set source path

Источник: https://developer.mozilla.org/en/Canvas_tutorial/Using_images

Answer 2

<canvas id="view" width="120" height="120">
błąd
</canvas>
<script>
var view = document.getElementById("view");

var ctx= view.getContext("2d");


img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 50, 50);
}
img.src = 'fajnetlo.png';

</script>