An approach preventing blurry canvas on mobile app
HandsomeTan
Posted on October 31, 2024
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);
💖 💪 🙅 🚩
HandsomeTan
Posted on October 31, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.