0
154
ViewsEstablecer el tamaño del lienzo con JQuery desdibuja el contenido
Tengo un script de cambio de tamaño simple como tal:
$(`#game`).css('width', '100%'); $(window).resize(function(){ $(`#game`).height($(`#game`).width() / 2.031); })(de https://stackoverflow.com/a/10750346/12359120 )
Sin embargo, el problema, como dijo cyberwombat , "esto hará que el contenido se vea borroso".
Las otras respuestas en esa publicación realmente no funcionan para mi situación, ya que a menudo hacen que los contenidos salgan de la pantalla.
En este momento, así de borroso es: 
Con las otras respuestas: 
¿Hay alguna forma de hacerlo menos borroso?
Editar: el ancho y la altura del elemento siempre dicen 300 y 150 aunque los estilos digan lo contrario. Aquí hay algunos HTML + CSS + JS que en su mayoría pueden reproducir esto.
const canvas = document.getElementById('game') const ctx = canvas.getContext("2d"); $(`#game`).css('width', '100%'); $(window).resize(function() { $(`#game`).height($(`#game`).width() / 2.031); }) const imageAt = ((href, x, y, sizex, sizey) => { var img = new Image(); img.addEventListener('load', function() { ctx.drawImage(img, x, y, sizex, sizey); }, false); img.src = href }) imageAt('https://b.thumbs.redditmedia.com/bZedgr0gq7RQBBnVYVc-Nmzdr-5vEUg4Dj8nTrMb7yA.png',0,0,25,25) #game { padding-left: 0; padding-right: 0; display: block; padding: 0; } #vertical-center { display: flex; align-items: center; justify-content: center; height: 100%; } body { background-color: black; padding: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="vertical-center"> <canvas id="game"></canvas> </div>
·
Juan Pablo Isaza
Answer question