background image stays even though another image is drawn over it

Question

as you can see at https://codepen.io/anon/pen/PvZzpe the character is leaving a trail on pressing left and right keys

I am trying to make the character to move left and right on the screen without leaving a trail but it is not working

I am doing so by calling the clearBg() as here:https://codepen.io/anon/pen/dEGXjV

can you see what the problem is?

@Wimanicesir hi did you try clicking on the canvas then pressing the left and right keys — Lakshay Sethi, May 09 '19 at 09:19
@Lakshay Try to use the clearRect(0,0,canvas.width,canvas.height) method before calling a new Image — MMJM, May 09 '19 at 10:25
**you may try it** https://stackoverflow.com/questions/39806858/how-to-use-arrow-keys-to-move-object-smoothly-in-canvas — Md Majadul Islam, Feb 01 '20 at 04:08

score 0 · Answer 1 · answered Feb 01 '20 at 04:27

The problem in your case is the clearBg function not work in a synchronous way. So when you click arrow keys it will first draw image and then clear the background. You will be able to solve that issue by using callback functions as below.

function clearBg(callback){
  var bg = new Image();
  bg.src = 'https://i.imgur.com/jfBz9o6.png';
  bg.onload = function(){ 
    c.drawImage(bg,0,0,950,550);
    if(callback) callback();
  };
}

function doKeyDown(event){
  switch(event.keyCode){
    case 37:
      clearBg(function() {
        MrK1.goLeft();
        MrK1.draw();
      });
      break;
    case 39:
      clearBg(function() {
        MrK1.goRight();
        MrK1.draw();
      });
      break;
  }
}

If you are not familiar with callbacks, just read this medium post. it will give you some basic idea.

background image stays even though another image is drawn over it

1 Answers1