title: HTML canvas making blurry shapes
body: <p>I want to make simple shapes using HTML.
  But the shapes need to be big. 
  And the canvas is in full screen</p>
  
  <p>Example: <a href="http://jsfiddle.net/xLgg43s9/1/embedded/result/" rel="nofollow">http://jsfiddle.net/xLgg43s9/1/embedded/result/</a></p>
  
  <p>Code:</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  * { margin: 0; padding: 0;}
  
  body, html { height:100%; }
  
  #canvas {
      position:absolute;
      width:100%;
      height:100%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;canvas id="canvas"&gt;
  &lt;/canvas&gt;
  &lt;script&gt;
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  ctx.fillStyle = "#000";
  var w=canvas.width;
  var h=canvas.height;
  ctx.fillRect(0,0,w,h);
  ctx.fillStyle="#fff";
  ctx.beginPath();
  var a=w/2;
  var b=0;
  ctx.arc(a,b,20,0,Math.PI,false);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle="red";
  ctx.fillRect(0,0,10,100);
  ctx.stroke();
  ctx.save();
  
  ctx.translate(240, 120);
  
  ctx.rotate(Math.PI / 4); // 45 degrees
  
  ctx.fillStyle = "yellow";
  ctx.fillRect(-40, -40, 20, 20);
  
  ctx.restore();
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please fix it.</p>