Recently, a document display function was used in the project. After uploading the file, it was processed into pictures in the background. The front end draws the picture to the canvas for display, but the effect is not very good, the text in the canvas looks very blurred. Take a look at the effect first, as shown in Figure 1. The screenshots were taken on a 1920*1080 resolution monitor.

The top part of the picture is canvas, and the bottom part is the picture. The resolution of the picture is 2479*3508, and the width of the picture display is 800px. Drawing method

<canvas id="canvas" width="800" height="400"></canvas> <img id="docImg" src="./doc3.jpg" alt=""> <script> var canvas = document.querySelector('#canvas') var ctx = canvas.getContext('2d') var img = document.querySelector('#docImg') img.onload = function () { ctx.drawImage(img, 0, 0, 800, 1132) ctx.strokestyle ='#f00' ctx.strokerect (0,0,400,50)} </script>Copy the code

As you can see, the content in the canvas is much blurry than the image. Because the image itself is 2479 wide, but the style width is set to 800px, equal to the image compression display, so the clarity is not bad. Below want how to solve, first think of high score screen adaptation, especially on the Mac. From the display effect of the picture, we can think of a bigger canvas and a smaller display of Canavs, will it have the same effect as the picture? There are two specific types of scaling, one is directly using matrix scaling in canvas, the other is using style scaling

Method one: Canvas matrix scaling

Use the canvas scale to scale to 0.5 times, then draw the picture is, the width is 2 times the original, the code is as follows

<canvas id="canvas" width="800" height="400"></canvas> <img id="docImg" src="./doc3.jpg" alt=""> <script> var canvas = document.querySelector('#canvas') var ctx = canvas.getContext('2d') var img = document.querySelector('#docImg') Ctx. scale(0.5,0.5) img.onload = function () {ctx.drawImage(img, 0, 0, 800*2, 1132*2) ctx.strokestyle ='#f00' ctx.strokerect (0,0,400,50)}Copy the code

In contrast, I drew a rectangle with a red frame, 400 by 50. You can see that the width of the second rectangle is half smaller, so you can see that the document is also scaled. The effect is shown in Figure 2Figure 2

But the text was just as vague, and the method failed.

Method two: Style scaling

Make the canvas twice as big as before, draw it twice as big, and then use CSS transform to reduce the canvas display. The following code

<canvas id="canvas" width="1600" height="800" style="transform:scale(0.5,0.5); transform-origin: 0 0;" ></canvas> <img id="docImg" src="./doc3.jpg" alt=""> <script> var canvas = document.querySelector('#canvas') var ctx = canvas.getContext('2d') var img = document.querySelector('#docImg') img.onload = function () { ctx.drawImage(img, 0, 0, StrokeStyle ='#f00' ctx.strokerect (0,0,400,50)} </script>Copy the code

Note that the canvas is set to width, and the height property is twice as high as before. You cannot use CSS width and height. See the effect

Figure 3

Basically the same as the picture, the red rectangle can be clearly seen to be thinner, so the display effect is more delicate, to solve the problem of blurred picture. As a side effect, the canvas will remain the same size in the DOM stream after being scaled by the Transform scale, so we need to use other styles to deal with it. I’m using transform-origin to scale the origin in the upper left corner. Other DOM elements, such as the images below, are positioned so that the page does not leave large chunks of white space.

For the second method, why not use the width and height in the style? The next article will be devoted to the transformation in the canvas.