An approach preventing blurry canvas on mobile app

#frontend #javascript #canvas

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);