The treatment method of HTML5 canvas under high power screen under variable blur

A reason for something

The skills radar map of the community website recently used canvas, as shown in the following figure.

The display of the screen under one times:

Twice times the display under the screen:

Just as I am very happy to be ready to release out, with the Mac book development colleagues told me that this is simply paste do not want to AH ~ (?) ~.. Nani but my Asus display is perfect, this is very embarrassing.

Conjecture is canvas, after all, similar to the bitmap, in the retina screen if not multiple screen display processing, the picture should be blurred. Google had a turn, and sure enough.

Two. Problem analysis

Because canvas is not a vector graph, it is a bitmap pattern like a picture. If you do not do retina screen adaptation, such as twice times the screen, the browser will be 2 pixel width to render a pixel, the canvas in the retina screen equivalent to occupy twice times the space, the equivalent of the picture was magnified one times, so the picture will become blurred.

Therefore, to do Retina screen adaptation, the key is to know the device pixel ratio of the current screen, then enlarge the canvas to the device pixel ratio to draw, and then compress the canvas to one time to show.

Three. Solutions

Therefore, to do Retina screen adaptation, the key is to know the actual rendering rate of the current canvas, and then the canvas magnification to the magnification to draw, and finally the canvas compressed into one-times physical size to show.

Note that the line size, text size and so on in the canvas need to be multiplied by the magnification to draw.

Actual rendering magnification of 3.1 canvas

In the browser window variable, there is a Devicepixelratio property that represents the device pixel ratio of the screen, which renders 1 pixels with a few (usually 2) pixel widths.

There is also a webkitbackingstorepixelratio attribute in the canvas context, which determines that the browser stores the canvas information with a few pixels before rendering the canvas. The value in Safari under IOS6 is 2, but the value in the Chrome and IOS7 Safari is 1. In Safari under IOS6, if you have a picture of 100x100 pixels, the picture will first generate a 200x200 picture in memory, and then the browser will display the 100x100 image when rendering, so there is no blur distortion. And there's a blur in the Chrome and IOS7 Safari.

However, the Webkitbackingstorepixelratio attribute is not available in the browser vendor, so it is necessary to add a browser prefix to achieve compatibility.

As follows:

var canvas = document.getElementById ("Canvas"),
Context= Canvas.getcontext ("2d");

Device pixel ratio of the screen
var devicepixelratio = Window.devicepixelratio | | 1;

The pixel ratio that the browser stores the canvas information before rendering the canvas
var backingstoreratio = Context.webkitbackingstorepixelratio | |
Context.mozbackingstorepixelratio | |
Context.msbackingstorepixelratio | |
Context.obackingstorepixelratio | |
Context.backingstorepixelratio | | 1;

Actual rendering magnification of canvas
var ratio = Devicepixelratio/backingstoreratio;
3.2 The actual rendering magnification to scale canvas

First, add a basic knowledge point:

To set the canvas canvas size, use the canvas.width and canvas.height;
To set the actual rendering size of the canvas, the width and height of the style or CSS settings used are simply scaled to the canvas.
Such as:

<canvas width= "640" height= "style=" width:320px; height:400px "></canvas>
Canvas the actual size of the 640pxx800px, but the actual rendering to the page size is 320pxx400px, which is equivalent to a reduction of one-fold to display.

Therefore, to make the canvas suitable for high-power screen, is to enlarge the canvas to the device pixel ratio to draw, and finally canvas compressed into a physical size to show. As follows:

Canvas.style.width = Canvas.width;
Canvas.style.height = Canvas.height;

Canvas.width = canvas.width * ratio;
Canvas.height = canvas.height * ratio;

3.3 Actual Rendering Effect:

The actual rendering effect is as follows:

One-fold screen below:

<canvas width= "height=" "style=" width:200px; height:120px; " ></canvas>

Twice times the screen:

<canvas width= "height=" "style=" width:200px; height:120px; " ></canvas>

Three times times the screen:

<canvas width= "height=" 360 "style=" width:200px; height:120px; " ></canvas>
perfect!

3.4 Points to note

The line size, text size and so on in the canvas need to be multiplied by the device pixel ratio to draw, otherwise the line under high power screen will be thinner several times