Click here to Skip to main content
15,065,758 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:


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


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

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

Updated 19-Apr-21 21:41pm

1 solution

So go back to where you got the solution from, and ask there - they will know a lot more about it than we will!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900