Moving string around the canvas with keyboard arrows

Question

I am trying to make a basic game for training purposes in which the player could go either up, down, left or right. I have managed to print "x" on arrow key press to the direction it was pressed, but if I navigate to the left or down I'm not able to remove old prints.

I have tried many different combinations for left and down directions but i was not able to find how it is working.

What am i missing here ?

<canvas id="ctx" width="500" height="500" style="border:1px solid black">sss</canvas>
<script>

document.onkeydown = checkKey;

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var HEIGHT = 500;
var WIDTH = 500;
var x = 50;
var y = 50;
var speed = 20;
ctx.fillText('x', x,y); // Writes text 

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
        console.log('up');
        y-=speed;   
        ctx.clearRect(x,y, WIDTH, HEIGHT);          
        ctx.fillText('x', x,y); // Writes text 

    }
    else if (e.keyCode == '40') {
        // down arrow
        console.log('down');
        y+=speed; 
        ctx.fillText('x', x,y); // Writes text  

    }
    else if (e.keyCode == '37') {
       // left arrow
        console.log('left');
        x-=speed;
        ctx.fillText('x', x,y); // Writes text      
        ctx.clearRect(x,y, WIDTH, HEIGHT);

    }
    else if (e.keyCode == '39') {
       // right arrow
       console.log('right');
        x+=speed;
        ctx.fillText('x', x,y); // Writes text      
        ctx.clearRect(x,y, -WIDTH, -HEIGHT);

    }

}

</script>

How could I make "X" to navigate around the canvas without leaving old prints behind it ?

JSFIDLE

Thank you!

score 0 · Accepted Answer · edited May 23 '17 at 12:07

I know what the problem is, but I don't have time to research the solution.

If you'll look at my version, I extracted clearOld into its own function and added a bunch of coloring to see what is going on.

Also notice that I re-arranged the code slightly so we are always trying to erase the 'X' from the OLD position before updating the co-ordinates. (I also added a return false at the end of the function to make it play better in the snippet.)

When you write text it has a different bounding area then the rectangle you are using to cover it with.

This question may help you find a better bounding box:

How can you find the height of text on an HTML canvas?

document.onkeydown = checkKey;

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var HEIGHT = 500;
var WIDTH = 500;
var x = 50;
var y = 50;
var speed = 20;
ctx.fillText('x', x, y); // Writes text 

//var oldFill = 

function clearOld(ctx, x, y) {
  ctx.fillStyle = "orange";
  ctx.fillRect(x, y, -WIDTH, -HEIGHT);
  ctx.fillStyle = "green";
  ctx.fillRect(x, y, 5, 5);
  ctx.fillStyle = "";
}

function checkKey(e) {

  e = e || window.event;

  if (e.keyCode == '38') {
    // up arrow
    console.log('up');
    clearOld(ctx, x, y);
    y -= speed;
    ctx.fillText('x', x, y); // Writes text 

  } else if (e.keyCode == '40') {
    // down arrow
    console.log('down');
    clearOld(ctx, x, y);
    y += speed;
    ctx.fillText('x', x, y); // Writes text  

  } else if (e.keyCode == '37') {
    // left arrow
    console.log('left');
    clearOld(ctx, x, y);
    x -= speed;
    ctx.fillText('x', x, y); // Writes text         

  } else if (e.keyCode == '39') {
    // right arrow
    console.log('right');
    clearOld(ctx, x, y);
    x += speed;
    ctx.fillText('x', x, y); // Writes text      



  }
  return false;
}

<canvas id="ctx" width="200" height="200" style="border:1px solid black">sss</canvas>

score 0 · Answer 2 · answered May 14 '16 at 01:37

Just move the clearRect to before the change of x,y and change it to ctx.clearRect(x,y, WIDTH, -HEIGHT);

PS - the height and width aren't accurate, but this more than covers the X. Also, you should look into making this a monospace font with clear height/width if you want to put other things on the canvas as text.

Moving string around the canvas with keyboard arrows

2 Answers2