title: Unwanted border around canvas
body: <p>Im writing text on a canvas and drawing a line. Somehow, I end up with an unwanted border around my canvas:</p>
  
  <p><a href="https://i.stack.imgur.com/XEuHV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XEuHV.png" alt="enter image description here"></a></p>
  
  <p>First I write the text in top right corner and call <code>context.save()</code>, then i draw the line and call <code>context.stroke()</code>.</p>
  
  <p>Code:</p>
  
  <pre><code>$(document).ready(function() {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
  
      context.beginPath();
      context.rect(0, 0, canvas.width, canvas.height);
      context.fillStyle = 'black';
      context.fill();
  
      paintName(context, canvas);
      drawLine(context);
  });
  
  
  
  function paintName(context, canvas) {
  
      context.textAlign = "left";
      context.font = "16pt Arial";
      context.fillStyle = 'red';
      context.fillText('G5', context.canvas.width - 35, 18);
      context.strokeStyle = 'red';
  
    context.save();
  }
  
  function drawLine(context){
      var gatingCoords = [[30, 120], [50, 300]];
      var nextX, nextY, pointX, pointy;
  
      context.lineWidth = 4;
  
      for (var i = 0; i &lt; gatingCoords.length; i++) {
  
          pointX = gatingCoords[i][0];
          pointY = gatingCoords[i][1];
  
  
          if (i === gatingCoords.length - 1) {
              nextX = gatingCoords[0][0];
              nextY = gatingCoords[0][1];
          } else {
              nextX = gatingCoords[i + 1][0];
              nextXY = gatingCoords[i + 1][1];
          }
  
          context.moveTo(pointX, pointY);
          context.lineTo(nextX, nextY);
      }
  
      context.stroke();
  }
  </code></pre>
  
  <p>And fiddle is <a href="http://jsfiddle.net/8kced1bs/" rel="nofollow noreferrer">here</a>. How is this happening?</p>