First, the website width and height is based on the user screen.

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

c.width = window.innerWidth;
c.height = window.innerHeight;

window.addEventListener("resize", function () {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
})

Then, I am using drawImage

class castle {
    constructor() {
        const castle = new Image()
        castle.src = './Img/castle.png'

        castle.onload = () => {
            this.scale = 0.5
            this.image = castle
            this.width = this.image.width * this.scale
            this.height = this.image.height * this.scale
            this.position = {
                x: c.width / 2 - this.width / 2,
                y: c.height / 2 - this.height / 2
            }

            this.center = {
                x: c.width / 2,
                y: c.height / 2
            }
        }

    }

    draw() {
        ctx.drawImage(
            this.image,
            this.position.x,
            this.position.y,
            this.width,
            this.height
        )
    }
}

Same monitor:

Why the image shown different size between Google Chrome and Safari?

The performance of my project with Google Chrome is fine. However, the image size with Safari is too too big

I googled: image to canvas on chrome but not safari

Em... Should I upload all image to imgur? It's better than open a folder Img in my project?