CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
JacopoStanchi
JacopoStanchi

Reputation: 441

Blurry image with <canvas>

I try to translate a webgame from Flash to HTML5 with sprites in pixel art, and what I see is that the canvas is blurry compared to Flash where we can clearly discern the pixels.

<!DOCTYPE html>
<html>
<body>
  <canvas id="c" style="border: 1px solid black;"></canvas>
  <script>
  var ctx = document.getElementById("c").getContext("2d");
  ctx.imageSmoothingEnabled = false;
  var img = new Image();
  img.src = "https://i.imgur.com/kSEDvba.png";
  ctx.drawImage(img,10,10);
  </script>
</body>
</html>

Yes, it's slight, but I still want to fix it. I have already tried ctx.imageSmoothingEnabled = false; and the solution given by DiveintoHTML5 but it doesn't help.

Thank you for your help.

Upvotes: 1

Views: 4353

Answers (1)

diogenesgg
diogenesgg

Reputation: 2859

Apply the following css rule to your canvas element

Chrome: image-rendering: pixelated;

Firefox: image-rendering: optimizespeed;

Upvotes: 4

Related Questions