I am trying to use the HTML canvas to crop an image. But even before cropping the image, the image looks blurry when I rendered it on the canvas. I then rendered the same image using HTML tag, and the image wasn't blurry. I used a width and height of 300px for both the canvas and the img tag. I can't seem to be able to find out why the image looks blurry in the canvas.
const img = document.querySelector(".my-image");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
The image rendered on the image tag looks like this: Image rendered with tag
And the image rendered on the canvas looks like this: Image rendered on canvas
If I look at the two images you share, the two images seem to be 600x600px.
img tag, the image appears to be displayed at 600x600px.canvas method, you crop the image at 300x300px, but your page displays the result by stretching it at 600x600pxwhich seems to give this blurred effect.