JavaScript: How to draw multiple rectangles with Canvas using fillRect?

Question

I am attempting to create a simple game where I have two rectangles, a human-controlled player and a "collider" that has to be avoided.

I am trying to draw the two rectangles using fillRect(), however only one shows up. For example, putting the "lime" colored rectangle first would result in it being drawn, but putting the "red" colored rectangle line first causes neither to be drawn.

I would expect a result where both rectangles are drawn/appear at the same time on the canvas:

<canvas id="gc" width="800" height="600"></canvas>
<script>
window.onload=function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/100);
}
// Variables
player_created = false;
collider_created = false;
player_width = 20;
player_height = 20;
collider_width = 15;
collider_height = 15;
player_velocity = 10;
collider_velocity = 20;
player_x = (document.getElementById("gc").getAttribute("width") - player_width)/2;
player_y = (document.getElementById("gc").getAttribute("height") - player_height)/2;
collider_x = (document.getElementById("gc").getAttribute("width") - collider_width)/4;
collider_y = (document.getElementById("gc").getAttribute("height") - collider_height)/4;
var player;
var collider;

// Objects
function Player(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function Collider(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function game() {
    ctx.fillStyle="black"; // Color canvas
    ctx.fillRect(0,0,canv.width,canv.height);

    if(!player_created) {
        player = new Player(player_x, player_y, player_velocity, player_velocity, player_width, player_height);
        player_created = true;
    }

    if(!collider_created) {
        collider = new Collider(collider_x, collider_y, collider_velocity, collider_velocity, collider_width, collider_height);
        collider_created = true;
    }

    colliderWallCollision(collider, canv.width, canv.height);

    playerWallCollision(player, canv.width, canv.height);

    ctx.fillStyle="lime"; // Color player
    ctx.fillRect(player.x, player.y, player.w, player.h);

    ctx.fillStyle="red"; // Color collider
    ctx.fillRect(collider.x, collider.y, collider.w. collider.h);
}

function playerWallCollision(entity, bound_x, bound_y) {
    if (entity.x + entity.w > bound_x) {
        entity.x = bound_x - entity.w;
    } 
    if (entity.x < 0) {
        entity.x = 0
    }
    if (entity.y + entity.h > bound_y) {
        entity.y = bound_y - entity.h;
    } 
    if (entity.y < 0) {
        entity.y = 0
    }
}

function colliderWallCollision(entity, bound_x, bound_y) {
    if (entity.x + entity.w >= bound_x || entity.x <= 0) {
        entity.vx = -entity.vx
    }
    if (entity.y + entity.h >= bound_y || entity.y <= 0) {
        entity.vy = -entity.vy
    }
}

function keyPush(evt) { // Read keystrokes
    switch(evt.keyCode) {
        // Vertical
        case 87: // w
            player.y -= player.vy;
            break;
        case 83: // s
            player.y += player.vy;
            break;

        // Horizontal
        case 65: // a
            player.x -= player.vx;
            break;
        case 68: // d
            player.x += player.vx;
            break;
    }
}
</script>

Answer 1

The second rectangle is failing to draw due to a syntax error on this line:

ctx.fillRect(collider.x, collider.y, collider.w. collider.h);

The following update will resolve that problem:

// Change . to , 
ctx.fillRect(collider.x, collider.y, collider.w, collider.h);

See the snippet below for a working version in action:

<canvas id="gc" width="800" height="600"></canvas>
<script>
window.onload=function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/100);
}
// Variables 
player_width = 20;
player_height = 20;
collider_width = 15;
collider_height = 15;
player_velocity = 10;
collider_velocity = 20;
player_x = (document.getElementById("gc").getAttribute("width") - player_width)/2;
player_y = (document.getElementById("gc").getAttribute("height") - player_height)/2;
collider_x = (document.getElementById("gc").getAttribute("width") - collider_width)/4;
collider_y = (document.getElementById("gc").getAttribute("height") - collider_height)/4;
var player;
var collider;

// Objects
function Player(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function Collider(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function game() {
    ctx.fillStyle="black"; // Color canvas
    ctx.fillRect(0,0,canv.width,canv.height);

    if(!player) {
        player = new Player(player_x, player_y, player_velocity, player_velocity, player_width, player_height);
    }

    if(!collider) {
        collider = new Collider(collider_x, collider_y, collider_velocity, collider_velocity, collider_width, collider_height);
    }

    colliderWallCollision(collider, canv.width, canv.height);

    playerWallCollision(player, canv.width, canv.height);

    ctx.fillStyle="lime"; // Color player
    ctx.fillRect(player.x, player.y, player.w, player.h);

    ctx.fillStyle="red"; // Color collider
    /* Typo here */
    ctx.fillRect(collider.x, collider.y, collider.w, collider.h);
}

function playerWallCollision(entity, bound_x, bound_y) {

    if (entity.x + entity.w > bound_x) {
        entity.x = bound_x - entity.w;
    } 
    if (entity.x < 0) {
        entity.x = 0
    }
    if (entity.y + entity.h > bound_y) {
        entity.y = bound_y - entity.h;
    } 
    if (entity.y < 0) {
        entity.y = 0
    }
}

function colliderWallCollision(entity, bound_x, bound_y) {
    if (entity.x + entity.w >= bound_x || entity.x <= 0) {
        entity.vx = -entity.vx
    }
    if (entity.y + entity.h >= bound_y || entity.y <= 0) {
        entity.vy = -entity.vy
    }
}

function keyPush(evt) { // Read keystrokes
    switch(evt.keyCode) {
        // Vertical
        case 87: // w
            player.y -= player.vy;
            break;
        case 83: // s
            player.y += player.vy;
            break;

        // Horizontal
        case 65: // a
            player.x -= player.vx;
            break;
        case 68: // d
            player.x += player.vx;
            break;
    }
}
</script>