Game project issue

[KenGibb]

What's the problem you're trying to solve?

Im having a problem rendering my player and monster on canvas.

Post any code you think might be relevant (one fenced block per file)

class Friend {
    constructor(x, y, width, height, color) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.color = color
        this.alive = true
        this.render = function () {
            ctx.fillStyle = this
        }
    }
}

//////// Savior Class /////////
class Savior {
    constructor(x, y, width, health, color) {
        this.x = x
        this.y = y
        this.width = width
        this.height = health
        this.color = color
        this.alive = true
        // players speed and direction
        this.speed = 20
        this.direction = {
            up: false,
            down: false,
            right: false,
            left: false
        }
        // the keys that sets the hero in that direction
        this.setDirection = function (key) {
            console.log('this is the key in setDirection', key)
            if (key.toLowerCase() == 'w') { this.direction.up = true }
            if (key.toLowerCase() == 'a') { this.direction.left = true }
            if (key.toLowerCase() == 's') { this.direction.down = true }
            if (key.toLowerCase() == 'd') { this.direction.right = true }
        }
        // when you let go it unsets player in the direction
        this.unsetDirection = function (key) {
            console.log('this is the key in unsetDirection', key)
            if (key.toLowerCase() == 'w') { this.direction.up = false }
            if (key.toLowerCase() == 'a') { this.direction.left = false }
            if (key.toLowerCase() == 's') { this.direction.down = false }
            if (key.toLowerCase() == 'd') { this.direction.right = false }
        }

        // I will need to set the direction property on savior object
        this.moveSavior = function () {
            if (this.direction.up) {
                this.y -= this.speed
                // this is to wall off savior
                if (this.y <= 0) {
                    this.y = 0
                }
            }
            if (this.direction.left) {
                this.x -= this.speed
                if (this.x <= 0) {
                    this.x = 0
                }
            }
            if (this.direction.down) {
                this.y += this.speed
                // to stop down and right directions, we again need to account for the size of our player
                if (this.y + this.height >= game.height) {
                    this.y = game.height - this.height
                }
            }
            if (this.direction.right) {
                this.x += this.speed
                if (this.x + this.width >= game.width) {
                    this.x = game.width - this.width
                }
            }
        }
        this.render = function () {
            ctx.fillStyle = this.color
            ctx.fillRect(this.x, this.y, this.width, this.height)
        }
    }
}'''

const player = new Savior(10, 10, 16, 16, 'lightsteelblue')
const monster = new Monster (200, 50, 32, 48, '#bada55')
const friend = new Friend (getRandomCoordinates(game.width), getRandomCoordinates(game.height), 64, 96, 'red')

Savior.render()```

### If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?
Not showing on my canvas.

### What is your best guess as to the source of the problem?
My css might not be working properly.

### What things have you already tried to solve the problem?
Tried to fix canvas and some html.

### Paste a link to your repository here[
](https://github.com/KenGibb/Savethem.git)

[scarletpuma]

You may want to take a look at the canvas crawler solution and see how Timm got his elements to render!