Изображение, движущееся под холстом, фоновое изображение

Question

У меня возникла проблема, когда изображение моего игрока перемещает пользовательское фоновое изображение холста.

Есть ли способ исправить это с помощью порядка ничьи или что-то в этом роде. Я перемещаю плеер, используя функцию i, вызванную KeyboardDown, а затем добавляю слушателя. Это отлично работает, за исключением того, что оно рисуется под фоновым изображением.

Вот мой код:

function gameLoop() 
{ 
    Initialize(); 

} 

function drawBackground() 
{ 
    g.drawImage(img,0, 0, 500, 500); 
} 

var img; 
var player1; 
var player2; 
var football; 

function Initialize() 
{ 
    img = new Image(); 
    img.src = "Images/GrassTexture.png"; 

    player1 = new Image(); 
    player1.src = "Images/Players/Mignolet.png"; 

    player2 = new Image(); 
    player2.src = "Images/Players/De Gea.png"; 

    football = new Image(); 
    football.src = "Images/Football/Football.png"; 

    g.drawImage(img,0, 0,400 , 500); 
    g.drawImage(player1,175,0,50,50); 
    g.drawImage(player2,175,450,50,50); 
    g.drawImage(football,185,250,25,25); 
} 
var x = 0; 
var y = 0 

function arrowKeyDown(e) 
{ 
    var stepSize = 10; 

    if (e.keyCode == 37) // left 
    { 
     x -= stepSize; 
    } 
    else if(e.keyCode == 39) // right 
    { 
     x += stepSize; 
    }  
    //g.clearRect(0,0,400,500); 
    g.drawImage(player1,x,y,50,50); 

} 

var g; 

window.onload=function() 
{ 

    var canvas = document.getElementById("Canvas"); 
    canvas.width = 400; 
    canvas.height = 500; 
    g = canvas.getContext("2d"); 
    gameLoop(); 

}; 
setInterval(gameLoop, 0); 
document.addEventListener('keydown',arrowKeyDown); 

Answer 1

получил это работает, установив холст фон через CSS вместо использования Javascript