title: Dynamically resize canvas within div element
body: <p>I am working on a website and I want to take what I put in between the title tags and make it an element on the page itself.  I am also wanting to do some manipulating of the text like adding borders.  I am trying to do this with the canvas element, which I have been able to do successfully, but I cannot figure out how to make it scale.</p>
  
  <p>I have found several answers to how to scale if it is taking up the whole screen, but not within div elements.  I have just started learning HTML5 and have never done anything like this before any help is appreciated.</p>
  
  <p>javascript code below:</p>
  
  <pre><code>function makeCanvas(){
  //1- Get Object
  var canvas1 = document.getElementById('titlearea');
  var ctx1 = canvas1.getContext('2d');
  var title =  document.getElementById('pagetitle').text;
  
  //2- Set parameters
  ctx1.font = '32pt Arial';
  ctx1.fillStyle = 'DeepSkyBlue';
  ctx1.strokeStyle = 'Black';
  
  //3- Action
  ctx1.fillText(title,200,50);
  ctx1.strokeText(title,200,50);
    }
  </code></pre>
  
  <p>HTML snippet below:</p>
  
  <pre><code>&lt;div id="title"&gt;
      &lt;canvas id="titlearea" width="2000" height="75"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS snippet below:</p>
  
  <pre><code>#title{
          background-color: #E6E6FA;
          color: #196405;
          font-size: large;
          border-bottom:1px solid #000000;
          padding: 1px;
          text-align: center;
          margin:0;
          width: 100%;
          height: 75px;
        }
  </code></pre>
  
  <p>Any help is appreciated.</p>