Clear canvas player path - redraw level array

Question

I'm making a simple platformer game using canvas, my problem is that I can't seem to clear the canvas while using an array to create the level.

If I use ctx.clearRect(0, 0, canvas.width, canvas.height); the player can then move correctly and the path behind it is cleared, but the canvas goes completely white. What is the best way to redraw my level from my array?

(function() {
var requestAnimationFrame = window.requestAnimationFrame ||     window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();


    /* Game Variables and Constants */


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

// level colors

var color = {
    darkBlue: '#2c3e50',
    blue: '#2980b9',
    green: '#1abc9c'

}

// add level colors to array

var colors = [color.darkBlue, color.blue, color.green];


// Level Plan
var levelArray = [

    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1]


];

// Images/Tiles for level

var sky = new Image();
var floor = new Image();


sky.src = "Tiles/bg-tile.png";
floor.src = "Tiles/floor-tile.png";

var levelPosX = 0;
var levelPosY = 0;



// Player Object

var player = {
    width: 20,
    height: 20,
    posX: 5,
    posY: canvas.height - 40,
    speed: 5,
    velX: 0,
    velY: 0
}



// empty keys array to store value of pressed keys 

var keys = [];





// Update Function - player controls etc

function update() {

    // move right
    if(keys[39]) {
        player.velX++;
    }

    player.posX += player.velX;

}



function drawLevel() {


    // take values from levelArray and assign them colors to canvas
    for(var i = 0; i < levelArray.length; i++) {
            for(var j = 0; j < levelArray[i].length; j++) {

                if(levelArray[i][j] == 0) {     
                    ctx.drawImage(sky, levelPosX, levelPosY, 20, 20);
                }

                if(levelArray[i][j] == 1) {         
                    ctx.drawImage(floor, levelPosX, levelPosY, 20, 20);
                }

                levelPosX += 20;
            }

            levelPosX = 0;
            levelPosY += 20;

        }

}



function render() {


    draw(); 

    requestAnimationFrame(render);

}

// Draw Function - draw the level, player

function draw() {

    update();
    drawLevel();



// Draw the player
    ctx.fillStyle = color.green;
    ctx.fillRect(player.posX, player.posY, player.width, player.height);


}



// Event listeners  -  stores the value of whatever key was pressed in the keys array

document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});


window.addEventListener("load", function(){
  render();
});

Answer 1

The purpose of ctx.clearRect is to remove all content from the canvas--probably leaving you with the white background of the webpage showing through the now fully transparent & empty canvas.

You cannot "move" anything you've drawn on the canvas.

Instead canvas animates content by erasing the canvas and redraw everything in its new position. That's the way canvas works...

1. Draw all content (background & players),
2. Give the user time to view the content,
3. Clear the canvas,
4. Update the positions of the new content,
5. Redraw all the new content in their new positions,
6. Repeat, repeat, repeat...