title: The Text on The Canvas Looks Pretty Blurry
body: <p>There is no blur when I run the code in the compilers on the internet, but it seems quite blurry when I run it on my project. What could be the reason for this? Photos and codes are below.</p>
  
  <p>.ts code</p>
  
  <pre><code>    public DrawTheTree() {
      var canvas: HTMLCanvasElement = document.getElementById("tree_canvas") as HTMLCanvasElement;
      var context: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
          context.beginPath();
          context.font = "16px Comic Sans MS";
          context.fillStyle = "white";
          context.textAlign = "center";
          context.fillText("Animals", 150, 15);
          context.closePath();    
      }
  </code></pre>
  
  <p>.html code</p>
  
  <pre><code>&lt;canvas id="tree_canvas" class="tree_canvas_class"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>.css code</p>
  
  <pre><code>.tree_canvas_class {
  background-color: darkblue;
  width: 936px;
  height: 435px;
  }
  </code></pre>
  
  <p>BlurryPhoto:<a href="https://www.dropbox.com/s/mle8vepnyesapip/Capture.JPG?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/mle8vepnyesapip/Capture.JPG?dl=0</a>
  DesiredPhoto: <a href="https://www.dropbox.com/s/g0fwn46ibrgascy/ss.JPG?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/g0fwn46ibrgascy/ss.JPG?dl=0</a></p>