search

Home >Web Front-end >HTML Tutorial >HTML5 canvas drawn lines look blurry

HTML5 canvas drawn lines look blurry

WBOY
WBOYforward
2023-09-08 20:45:051127browse

The task we are going to perform in this article is about HTML5 canvas drawing, such as lines looking blurry.

We observe a blurring effect because different devices have different pixel ratios. The browser or device used to view the canvas often affects how blurry the image is.

The Pixel Ratio gadget of the Window interface returns the ratio of the display device's physical pixels to its CSS pixel resolution. This number can also be understood as the ratio of physical to CSS pixels, or the size of one pixel to another.

Let's dig into the following example to learn more about HTML5 canvas drawing, where lines look blurry.

Example 1

In the example below, we blur simple text to make it clear.

HTML5 canvas drawn lines look blurry

We are considering this blurry image

<!DOCTYPE html>
<html>
<body>
   <canvas id="my tutorial"
      style="border:1px solid black;">
   </canvas>
   <script>
      var canvas = document.getElementById('my tutorial');
      var ctx = canvas.getContext('2d');
      window.devicePixelRatio=2;
      var size = 170;
      
      canvas.style.width = size + "px";
      canvas.style.height = size + "px";
      var scale = window.devicePixelRatio;
      
      canvas.width = Math.floor(size * scale);
      canvas.height = Math.floor(size * scale);
      
      ctx.scale(scale, scale);
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      var x = size / 2;
      var y = size / 2;
      var textString = "TUTORIALSPOINT";
      ctx.fillText(textString, x, y);
   </script>
</body>
</html>

When the script executes, it will generate text output, which we have considered as the example above without getting obscured.

Example 2

Consider that our drawing looks a bit blurry. 

<!DOCTYPE html>
<html>
   <style>
      div {
          border: 1px solid black;
          width: 100px;
          height: 100px;
      }
      canvas, div {background-color: #F5F5F5;}
      canvas {border: 1px solid white;display: block;}
   </style>
<body>
    <table>
        <tr><td>Line on canvas:</td></tr>
        <tr><td><canvas id="tutorial" width="100" height="100"></td><td><div> </div></td></tr>
    </table>
    <script>
       var ctx = document.getElementById("tutorial").getContext("2d");
       ctx.lineWidth = 1;
       ctx.moveTo(2, 2);
       ctx.lineTo(98, 2);
       ctx.lineTo(98, 98);
       ctx.lineTo(2, 98);
       ctx.lineTo(2, 2);
       ctx.stroke();
    </script>
</body>
</html>

When you run the above script, the output window will appear, showing a blurry line on the canvas and a 1-pixel border on the web page.

The above is the detailed content of HTML5 canvas drawn lines look blurry. For more information, please follow other related articles on the PHP Chinese website!

html5 css 接口
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to specify in HTML whether an or