Warum kann ich JS Canvas Image nicht übersetzen?

Question

Ich weiß, dass Sie Bilder mit ctx.translate() übersetzen können, aber wenn ich es mache, funktioniert es nicht. Ich weiß nicht, was falsch ist. Ich verbrachte solide 2 Stunden damit, es herauszufinden. Hier ist mein Code:

<canvas id="tank_layer" height="1080" width="1920"></canvas> 

var canvas = document.getElementById('tank_layer'), 
    ctx = canvas.getContext('2d') 

document.onkeydown=function(){ 

    ctx.translate(100,150) 
} 
img = new Image(1920, 1080), 
img.src="../tanks/maps/2.png" 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 

Answer 1

Sie müssen Ihr Bild nach der Übersetzung neu zu zeichnen, so fügen Sie die folgende:

document.onkeydown=function(){ 
    ctx.translate(100,150) 
    ctx.drawImage(img,0,0) 
} 

Idee

var counter=0; 

document.onkeydown=function(){ 
    if (counter===0) { 
     ctx.translate(100,150); 
     ctx.drawImage(img,0,0); 
     counter++; 
    } 
}