Image quality gets decreased when used in HTML canvas

See more:

Javascript

image

HTML5

Canvas

I am using an image having a dpi of 300. For some reason the image in the canvas looks very blurry. On smaller screens it looks fine. I have tried many remedies on the internet for this. One of them works.

Ensuring our Canvas Visuals Look Good on Retina/High-DPI Screens[^]

But the problem with this solution is that the image in the canvas does not resize when I resize my screen. Also I have some values on my screen. Those remain stationary and do not move along with the image.

What I have tried:

html

<canvas id="my_canvas" height="255" style="width: 100%;">
                     </canvas>

JS

c = new Image();
c.src = "./images/my_image.png";
c.onload = function () {


    c12.clearRect(0, 0, 320, 260);
    c12.drawImage(c, 0, 0);
    c12.beginPath();
.... code

}