DEV Community

HandsomeTan
HandsomeTan

Posted on

1

An approach preventing blurry canvas on mobile app

In general, the content of canvas from pc to mobile will be enlarged or shrank, resulting incertain blurry side effect. These can be addressed using the following method:

const domRect = document.getBoundingClientRect();
const dpr = window.devicePixelRatio; // get devicePixelRatio value of current mobile device
// set canvas viewport to multiple of dpr
canvas.width = domRect.width * dpr;
canvas.height = domRect.height * dpr;
// scale the content of canvas to multiple of dpr
canvas.scale(dpr, dpr);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay