title: How to put a line around the border of an HTML canvas?
body: <p>I want to add a border to my HTML CANVAS and thought that the following code would do that.</p>
  
  <p><strong>Question: How can I put a border around the Canvas in the code and in the HTML code></strong></p>
  
  <p>Code:</p>
  
  <pre><code>    context.fillStyle = 'red';
      context.strokeStyle = 'black';
  </code></pre>
  
  <p>The following code is the whole HTML file. It wasn't all that large so I just pasted it all in.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Chapter 4 Example 1: Image Basics&lt;/title&gt;
  &lt;script src="modernizr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  window.addEventListener('load', eventWindowLoaded, false);  
  
  function eventWindowLoaded() {
      canvasApp();
  }
  
  function canvasSupport () {
      return Modernizr.canvas;
  }
  
  function canvasApp(){
      if (!canvasSupport()) {
               return;
      }else{
          var theCanvas = document.getElementById('canvas');
          var context = theCanvas.getContext('2d');
  
          context.fillStyle = 'red';
          context.strokeStyle = 'black';
  
          context.font = '20pt Verdana';
          context.fillText('Some text', 50, 50);
          context.strokeText('Some text', 50, 50);
  
          context.fill();
          context.stroke();
      }
  
      var spaceShip=new Image();
      spaceShip.src="ship1.png";
      spaceShip.addEventListener('load', eventShipLoaded , false);
  
      function eventShipLoaded() {
          drawScreen();
      }
  
      function drawScreen() {
           context.drawImage(spaceShip, 10, 10);
           context.drawImage(spaceShip, 50, 50);
           context.drawImage(spaceShip, 150, 50);
      }
  }
  
  &lt;/script&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="position: absolute; top: 50px; left: 50px;"&gt;
      &lt;canvas id="canvas" width="500" height="500"&gt;
          Your browser does not support the HTML 5 Canvas. 
      &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>