Community

Learn

Tools Library

AI Tools

Leisure

English

Home > Web Front-end > JS Tutorial > An approach preventing blurry canvas on mobile app

An approach preventing blurry canvas on mobile app

Barbara Streisand

Release： 2024-11-03 07:01:02

Original

366 people have browsed it

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

Copy after login

The above is the detailed content of An approach preventing blurry canvas on mobile app. For more information, please follow other related articles on the PHP Chinese website!

source：dev.to

Previous article：How Can I Dynamically Determine a User\'s Time Zone in PHP? Next article：Evolution of Web Tech and Browsers

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn