Solving the problem of drawing fonts, pictures and blurry graphics in html5 canvas

html5 canvas drawing fonts, pictures and graphics blur problem

occurrence

occurs often On high dpi devices, this means more pixels per square inch, such as phones, tablets. Of course, many high-end desktop computers also have high-resolution and high-dpi monitors.

The scaling principle of canvas in the browser

If style is not set, then Use the html attributes width and height as dimensions.

If the width and height in the style are set, then the style setting will be the final size drawn to the browser.

In other words, the width and height in the attributes do not represent the actual width and height, so the canvas will be enlarged at high dpi, resulting in blur.

The width and height attributes of the canvas are the back buffer size of the canvas. After drawing to the browser, they will be scaled according to the current dpi.

devicePixelRatio (window member) saves the ratio of the attribute width/height being enlarged in high dpi state.

Error solution case

Search canvas blurred online , there will be two solutions, and they may not be suitable now.

One is CanvasRenderingContext2D.translate(0.5,0.5);

This is actually commonly used in the field of 3D drawing to deal with pixel offset. Move, canvas's 2d context has already dealt with this issue.

The other is backingStorePixelRatio. You will see code similar to the following. This backingStorePixelRatio has been removed in the new browser. I have tried chrome and edge and it no longer exists. .

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1

I used the method of dynamically creating canvas during research. The width/height of the style is multiplied by the scaling ratio devicePixelRatio to get the canvas attribute width/ height. <br>

This is not a perfect solution because it occurs when the browser's dpi changes, such as user settings, or when moving the window from a high-dpi monitor to a low-dpi monitor. (My 1080p ordinary 23-inch monitor is 1.25 times, and the tablet is 2.0 times, and dragging and dropping the window will happen)

Solution
1. Dynamically create and monitor the onresize event of the window, according to devicePixelRatio Rebuild canvas.
2. Dynamically adjust the width and height of the canvas style, and also monitor the onresize event. Then cooperate with CanvasRenderingContext2D.scale to dynamically scale the proportion of the drawn content.

Browsers do not have devicePixelRatio changing events or dpi changing events. If you know, please leave a message.

The above is the detailed content of Solving the problem of drawing fonts, pictures and blurry graphics in html5 canvas. For more information, please follow other related articles on the PHP Chinese website!