Ensuring our Canvas Looks Good on Retina/High-DPI Screens

Implement some sweet downsampling techniques to ensure crisp visuals.
📄 Read the article: www.kirupa.com...
📙 Buy the book: www.kirupa.com...
❓ Ask a question: forum.kirupa.com

[@DoorsExciteMe]

So informative, will definitely be doing this from now on. Thanks!

[@kirupa]

Glad you found it useful, Thomas! I don’t know why this isn’t something provided for free, for I don’t know why one would want blurry visuals.

[@user-lz2wf5dz2f]

The problem I found is when I zoom into any sketches on canvas then it looks really pixelated.. does this method solve that problem also?

[@kirupa]

No, it will not help with that. The canvas is just like a raster image. You can ensure the initial appearance is sharp, but when you start zooming in further, the individual pixels will become more visible.

[@user-lz2wf5dz2f]

@@kirupa How can this be solved? When drawing shapes using the DOM one can keep zooming and the resolution remains the same.

[@kirupa]

@@user-lz2wf5dz2f If you have an SVG in the DOM, they are vector based. Those naturally remain crisp when zooming in. For the canvas, you will need to detect the zoom and redraw all of your visuals at the new zoom level to ensure that the pixels are drawn to scale.

[@user-lz2wf5dz2f]

@@kirupa I guess the way the DOM works is that all the elements are SVGs? Because when I zoom they are still crisp. Is the detecting zoom a solution you've encountered before? Surely there's an easier built in solution?

[@geomukkath5373]

Hi Kirupa, I saw the article on this topic on your website and it works.
The only problem is that I am drawing an image on my canvas. Your code solves the problem of pixelation. But on top of my image I am positioning some values by specifying the x and y co-ordinates. When I. Check my screen in different resolution the values don't move with the image. They remain static. However when I remove the code the values move/resize with the image.

[@kirupa]

Can you share a link to your problem? It may be easier if you post on forum.kirupa.com so that others can chime in with their suggestions as well.

[@geomukkath5373]

@@kirupa yes Kriupa. Will do shortly.

[@michaels8297]

Ive had the exact same issue. Since modifying my code to resize based off the devicePixelRatio, I am having trouble when I am trying to for example, move a rectangle in the canvas. The mouse deviates from the rectangle as it is moved. I assume I have to readjust the click coordinates to be proportional to the devicePixelRatio?

[@yazerm]

lame solution

[@kirupa]

What do you think can be improved?

[@yazerm]

​@@kirupa its not practical to use "canvas.style.width" and "canvas.style.hieght" to resize to its original form its better to use only "canvas.width" and "canvas.height"
let canvas = document.getElementById("myCanvas");
let ctx;
let canvasOffset = canvas.getBoundingClientRect();
let w;
let h;
function canvasSetup(canvas){
ctx = canvas.getContext('2d');
w = window.innerWidth; //it can be whatever width you like
h = window.innerHeight; //it can be whatever height you like
let ratio = window.innerWidth/canvasOffset.width;
scale = window.devicePixelRatio;
canvas.width = w * scale;
canvas.height = h * scale;
ctx.scale(scale*ratio, scale*ratio);
}
canvasSetup(canvas)
let ctx;
function draw(){
ctx.clearRect(0,0,canvasOffset.width,canvasOffset.height);
// draw stuff here
}
draw();