title: Increase HTML5 Canvas Resolution
body: <p>I have tried everything I saw in here, but nothing seems to work on my code, or maybe I just don't know how to apply it.</p>
  
  <p>I am trying to get a better resolution in my html canvas, because the rectangles look a little bit "blurred".</p>
  
  <p>Here's my code:
  html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Canvas Resize&lt;/title&gt;
      &lt;style&gt;
          canvas {
              border: 1px solid black;
          }
  
          body {
              margin: 0px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="sig-canvas" width="1280" height="739"&gt;&lt;/canvas&gt;
      &lt;p id="timer"&gt;&lt;/p&gt;
      &lt;script src="canvas.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var canvas = document.getElementById("sig-canvas");
  var ctx = canvas.getContext("2d");
  
  var drawing = false;
  var mousePos = { x:0, y:0 };
  var lastPos = mousePos;
  canvas.addEventListener("mousemove", function (e) {
    mousePos = getMousePos(canvas, e);
      drawing = true;
  }, false);
  
  // Get the position of the mouse relative to the canvas
  function getMousePos(canvasDom, mouseEvent) {
    var rect = canvasDom.getBoundingClientRect();
    return {
      x: mouseEvent.clientX - rect.left,
      y: mouseEvent.clientY - rect.top
    };
  }
  
  // Get a regular interval for drawing to the screen
  window.requestAnimFrame = (function (callback) {
          return window.requestAnimationFrame || 
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame ||
             window.oRequestAnimationFrame ||
             window.msRequestAnimaitonFrame ||
             function (callback) {
          window.setTimeout(callback, 1000/60);
             };
  })();
  
  // Draw to the canvas
  function renderCanvas() {
    if (drawing) {
      ctx.fillStyle = "#FFFFFF";
      ctx.fillRect(mousePos.x, mousePos.y, 25, 25);
  
      ctx.strokeStyle = "#000000";
      ctx.lineWidth   = 2;
      ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
      lastPos = mousePos;
    }
  }
  
  // Allow for animation
  (function drawLoop () {
    requestAnimFrame(drawLoop);
    renderCanvas();
  })();
  </code></pre>
  
  <p>Here's my fiddle: <a href="https://jsfiddle.net/8cp5qmob/" rel="noreferrer">https://jsfiddle.net/8cp5qmob/</a></p>
  
  <p>Thank you!</p>