Question

0

152

Views

Setting Canvas size with JQuery blurs contents

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>

about 4 years ago · Juan Pablo Isaza

Answer question

0

152

Setting Canvas size with JQuery blurs contents

Find remote jobs

Andres GPT