Как вставить изображение на холст (HTML / JS)

Question

Я пытаюсь встроить изображение в холст, чтобы можно было рисовать линии поверх изображения холстом. Однако я не могу заставить изображение появиться внутри холста. Вот код, который у меня есть (HTML, затем JS):

<canvas id="myCanvas"  style="border:1px solid #d3d3d3; position: relative; z-index:3; top:10em; width: 30em; height: 20em; left: 22em;"></canvas>
    <img src="mapfinal.png" id="mapPic" style="display: none;"/>

javascript

        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        var map = document.getElementById("mapPic");
        ctx.drawImage(map, 20, 20);

Большое спасибо за любую помощь!

Answer 1

Это могло быть одно из двух. Наиболее вероятная проблема заключается в том, что изображение еще не загружено, прежде чем вы попытаетесь его нарисовать. Чтобы исправить это, добавьте прослушиватель событий onload к элементу img, чтобы рисовать его после загрузки изображения.

Другая проблема может заключаться в том, что, поскольку элемент img установлен на display: none браузер вообще не загружает изображение . В зависимости от браузера он может загружаться или не загружаться. Если вы не хотите, чтобы изображение отображалось, лучшим подходом было бы создать его через JavaScript.

var map = new Image();
map.onload = function() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  ctx.drawImage(map, 20, 20);
};
map.src = 'mapfinal.png';