canvas绘图出现模糊，解决方法

在项目开发中发现，canvas有一个问题，绘制的图会出现模糊现象。

解决方法之一：将canvas元素放大2倍，然后将整个canvas元素或者其父元素缩小两倍。

<!DOCTYPE html>
<html>

<body>
  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(200, 150, 100, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
  </script>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      zoom: 0.5;
    }
  </style>
</head>

<body>
  <div class="box">
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

  </div>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.scale(2, 2); // 放大2倍
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(200, 150, 100, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

  </script>

</body>

</html>