title: Align text on each side of HTML 5 canvas
body: <p>I'm trying to align text on each side of a canvas element. This seems difficult to do via CSS.</p>
  
  <p><a href="https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527" rel="nofollow">https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527</a></p>
  
  <p>Am I missing something obvious? I think it may be easier to position the text as part of the drawing logic instead of dealing with CSS.</p>
  
  <pre class="lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  </code></pre>
  
  
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-4"&gt;&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;top text&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-4"&gt;left text&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;&lt;canvas id="canvas" width="250" height="250"&gt;&lt;/canvas&gt;&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;right text&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-4"&gt;&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;bottom text&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br/>
  <a href="http://jsfiddle.net/bootstraponline/HSh7m/2/" rel="nofollow">Fiddle</a></p>