Primero, el ancho y la altura del sitio web se basan en la pantalla del usuario.

 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; })

Entonces, estoy usando 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 ) } }

Mismo monitor:

¿Por qué la imagen muestra un tamaño diferente entre Google Chrome y Safari?

El rendimiento de mi proyecto con Google Chrome está bien. Sin embargo, el tamaño de la imagen con Safari es demasiado grande

Busqué en Google: imagen a lienzo en Chrome pero no Safari

Em... ¿Debería subir todas las imágenes a imgur? ¿Es mejor que abrir una carpeta Img en mi proyecto?