Blurry Image on canvas

Question

Drawing the image on canvas makes it very blurry. But as the image is scaled up it gets crisp. I cannot figure out the problem.

image I am using : https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80

codepen link : https://codepen.io/AdnanHashmi/pen/eYNQPoX

Even zooming in on the page shows that the image drawn on canvas is blurred and smugged.

This is how it looks. The left image here is the image drawn on canvas while the right one is put on the screen using tag.

My code:

const canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var dpi = window.devicePixelRatio;
var img = new Image();
img.src =
  "https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80";
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.style.width = canvas.width.toString() + "px";
canvas.style.height = canvas.height.toString() + "px";

img.onload = () => {
  var newWidth = canvas.width * dpi;
  var newHeight = canvas.height * dpi;

  canvas.style.width = newWidth.toString() + "px";
  canvas.style.height = newHeight.toString() + "px";

  ctx.drawImage(img, 100, 100, 100, 150);
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  image-rendering: pixelated;
}

img[src$=".gif"],
img[src$=".png"] {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.sharp {
  position: absolute;
  top: 100px;
  left: 250px;
  width: 100px;
  height: 150px;
}

<canvas></canvas>
<img src="https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="sharp" alt="" srcset="">

You should not "scale" canvas by setting the size style properties. Take a look at [transform](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform) — Teemu, Mar 26 '20 at 19:03
What should I set the parameters of the transform to. The dpi calculated? I am not getting how transform needs to applied in the code i provided above. — Adnan, Mar 26 '20 at 20:42
Does not look blurry, there are a few artifacts but certainly no blur — Helder Sepulveda, Mar 26 '20 at 21:07
@HelderSepulveda It is blurry. I will attach a picture with the post. You can check for youserlf too. Open the codepen link i have provided and zoom in using chrome zoom in tool. You will see the difference — Adnan, Mar 27 '20 at 05:49
I'm not sure what sizes you're trying to change. Use `canvas.width` and `canvas,height` to resize the canvas itself. When you want to [resize](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) the image you're just about to draw, use `dWidth` and `dHeight` arguments to define the new size. If you want to scale an existing canvas, use `transform` matrix or [`scale`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale), but __never__ use CSS styles for sizing of canvases. — Teemu, Mar 27 '20 at 06:02
After you've got the scaling/resizing corrected, and if the image is still blurry, take a look at [this post](https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly). Also, [MDN's Canvas Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) is good reading ... — Teemu, Mar 27 '20 at 06:06
Adnan, I did check before I posted my comment, it was not blurry then and your image now is not blurry, what you see are artifacts from scaling and zooming in the page, 100% expected — Helder Sepulveda, Mar 27 '20 at 12:11

Blurry Image on canvas

0 Answers0