Javascript canvas not redrawing?

Question

I'm working on a game (canvas-based), and I've run into a problem. Apparently, when I press a key, instead of the canvas updating the x and y of the object, it's just doing nothing. The variable itsself is updating, but the object on screen is not. Here's the code:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

var bluex = 560;
var bluey = 380;

var orangex = 20;
var orangey = 380;

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 640, 480);

ctx.fillStyle = "orange";
ctx.fillRect(orangex, orangey, 64, 64);

ctx.fillStyle = "blue";
ctx.fillRect(bluex, bluey, 64, 64);

function keyDownHandler(event) {
    var keyPressed = String.fromCharCode(event.keyCode);

    if (keyPressed == "W") {
        orangey = orangey - 5;
        bluey = bluey - 5;
    } else if (keyPressed == "D") {
        orangex = orangex + 5;
        bluex = bluex - 5;
    } else if (keyPressed == "S") {
        orangey = orangey + 5;
        bluey = bluey + 5;
    } else if (keyPressed == "A") {
        orangex = orangex - 5;
        bluex = bluex + 5;
    }
    alert(bluex + " " + bluey);
}

document.onkeydown = keyDownHandler;

Does anyone know how to fix this? Sorry if this is an incredibly basic code problem.

Answer 1

Change your function to the following:

function keyDownHandler(event) {
    var ctx = canvas.getContext("2d");
    var keyPressed = String.fromCharCode(event.keyCode);

    if (keyPressed == "W") {
        orangey = orangey - 5;
        bluey = bluey - 5;
    } else if (keyPressed == "D") {
        orangex = orangex + 5;
        bluex = bluex - 5;
    } else if (keyPressed == "S") {
        orangey = orangey + 5;
        bluey = bluey + 5;
    } else if (keyPressed == "A") {
        orangex = orangex - 5;
        bluex = bluex + 5;
    }
    ctx.fillStyle = "orange";
    ctx.fillRect(orangex, orangey, 64, 64);

    ctx.fillStyle = "blue";
    ctx.fillRect(bluex, bluey, 64, 64);
}

Your ctx.fillStyle didn't got called when the function was called, but the variables got updated

Answer 2

I see two potential problems here with your code.

First Problem

Your code only draws to the canvas once. You can combat this in two ways. Firstly, you could contain the drawing code within a loop to update the canvas every x amount of seconds. Your second option is to redraw the canvas whenever a key is pressed.

Second Problem

Before you redraw the canvas, you need to clear it. This helps to avoid some pretty trippy effects.

Potential Solution

window.requestAnimationFrame(function(){
  ctx.clearRect(0, 0, yourCanvasWidth, yourCanvasHeight);
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, 640, 480);

  ctx.fillStyle = "orange";
  ctx.fillRect(orangex, orangey, 64, 64);

  ctx.fillStyle = "blue";
  ctx.fillRect(bluex, bluey, 64, 64);
})

Preferred Solution

Create a complete game loop.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

var bluex = 560;
var bluey = 380;

var orangex = 20;
var orangey = 380;

    function gameLoop(){
      update();
      render();
      requestAnimationFrame(gameLoop);
    }

    function update(){};

    function render(){
      ctx.clearRect(0, 0, yourCanvasWidth, yourCanvasHeight);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, 640, 480);

      ctx.fillStyle = "orange";
      ctx.fillRect(orangex, orangey, 64, 64);

      ctx.fillStyle = "blue";
      ctx.fillRect(bluex, bluey, 64, 64);
    }

function keyDownHandler(event) {
    var keyPressed = String.fromCharCode(event.keyCode);

    if (keyPressed == "W") {
        orangey = orangey - 5;
        bluey = bluey - 5;
    } else if (keyPressed == "D") {
        orangex = orangex + 5;
        bluex = bluex - 5;
    } else if (keyPressed == "S") {
        orangey = orangey + 5;
        bluey = bluey + 5;
    } else if (keyPressed == "A") {
        orangex = orangex - 5;
        bluex = bluex + 5;
    }
    alert(bluex + " " + bluey);
}

document.onkeydown = keyDownHandler;

requestAnimationFrame(gameLoop); // TO START THINGS OFF

This is by no means the most efficient game loop, but it should point you in the right direction.

Note: Don't forget to update the yourCanvasWidth and yourCanvasHeight within the clear function to your actual values.

http://codeincomplete.com/posts/2013/12/4/javascript_game_foundations_the_game_loop/