CODEWITHSUNDEEP
javascripthtmlcanvas
Driglou
Driglou

Reputation: 97

Canvas translate function wont work on key trigger

When I put engine.map.ctx.translate(engine.moveX, engine.moveY); just like that it works perfectly, but when I try to invoke this function on key trigger it gives me nothing.

I'm checking with alert if key triggers works and they do, however engine.map.ctx.translate(engine.moveX, engine.moveY); isn't working inside switch statement.

var engine = {}
    engine.moveX = 0;
    engine.moveY = 0;

engine.map = {}
    engine.map.canvas = document.getElementById('canvas');
    engine.map.ctx = engine.map.canvas.getContext('2d');

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch(evt.keyCode){
    case 37:
         engine.moveX -= 15;
         engine.map.ctx.translate(engine.moveX, engine.moveY);
         alert('left');
         break;
    case 38:
         engine.moveY -= 15;
         engine.map.ctx.translate(engine.moveX, engine.moveY);
         alert('up');
         break;
    case 39:
         engine.moveX += 15;
         engine.map.ctx.translate(engine.moveX, engine.moveY);
         alert('right');
         break;
    case 40:
         engine.moveY += 15;
         engine.map.ctx.translate(engine.moveX, engine.moveY);
         alert('down');
         break;
    }
};

Upvotes: 0

Views: 311

Answers (1)

markE
markE

Reputation: 105015

The ctx.translate command is not designed to redraw anything

It only repositions the canvas for subsequent draws.

So you now need to also redraw your object.

Upvotes: 1

Related Questions