Как разместить изображение позади холста

Question

Я нахожусь на последнем этапе игры, и когда я помещаю фоновое изображение, оно перекрывает Canvas, как мне это исправить? - Google переводчик

игра

игра с фоном

Answer 1

сделать изображение как css background-image элементов, содержащих холст, или сделать изображение абсолютным с меньшим значением z-index, чем у холста

Answer 2

Вы можете использовать drawImage свойство canvas

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var background = new Image();
background.src = "https://cdn0.iconfinder.com/data/icons/is_google_plus_one_icons/256/google_plus_one_-plus-1_canvas.png";
background.onload = function(){
    ctx.drawImage(background,0,0, 200, 100);   
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
}

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Используйте свойство onload для отображения содержимого холста.