Setting Canvas size with JQuery blurs contents

Question

I've got a simple resize script as such:

$(`#game`).css('width', '100%');

$(window).resize(function(){
    $(`#game`).height($(`#game`).width() / 2.031);
})

(from https://stackoverflow.com/a/10750346/12359120)

The problem though, as cyberwombat said, "This will cause the content to be blurred."

The other answers on that post don't really work for my situation, as they often make the contents go offscreen.

Right now this is how blurry it is: With the other answers:

Is there any way to make it less blurry?

Edit: The element's width and height always say 300 and 150 even though the styles say otherwise. Here is some HTML + CSS + JS that can mostly reproduce this.

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>

You have to redraw the canvas. It won't automatically do it itself. — Andy, Feb 11 '22 at 08:34
I'm drawing the images on the canvas after it's resized. Is there some function to redraw it that I should know about? @Andy — codingmaster398, Feb 11 '22 at 08:37
Does this answer your question? [HTML5 - Canvas, drawImage() draws image blurry](https://stackoverflow.com/questions/31910043/html5-canvas-drawimage-draws-image-blurry) — Greedo, Feb 11 '22 at 08:37
@Greedo it makes it kinda worse. https://i.ibb.co/sgY22BF/image.png — codingmaster398, Feb 11 '22 at 08:38
I assume the image is in a rasterised format, therefore any attempt to resize it (especially making it larger) will result in a loss of quality. — Rory McCrossan, Feb 11 '22 at 08:49
@RoryMcCrossan I'm not looking to make it bigger, it fits the entire page perfectly on all devices. The blurriness of when I draw anything into it is my issue. The element's width and height always say `300` and `150` even though the styles say otherwise. — codingmaster398, Feb 11 '22 at 08:52
Ok, understood. Can you please edit the question to include your relevant HTML & CSS so we can create a working example of the problem. — Rory McCrossan, Feb 11 '22 at 08:55

Setting Canvas size with JQuery blurs contents

0 Answers0