title: Center a circle in a canvas with a % width
body: <p>It does not seem that I can draw a circle in the center of a canvas, if the canvas has a width % such as %33.3333 (the idea is to have 3 beside each other).</p>
  
  <p>Why is this?
  <a href="http://jsfiddle.net/n302nsbh/2/" rel="nofollow">http://jsfiddle.net/n302nsbh/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="test"&gt;
      &lt;canvas class="myCanvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.myCanvas {
      width: 33.3333333333%;
      display: inline-block;
      background-color: red;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code> var canvas = $('.myCanvas');
   canvas.width = canvas.width();
   canvas.height = canvas.height();
  
   var context = canvas.get(0).getContext('2d');
   var centerX = canvas.width / 2;
   var centerY = canvas.height / 2;
   var radius = canvas.height/2;
  
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
   context.fillStyle = 'blue';
   context.fill();
   context.lineWidth = 5;
   context.strokeStyle = '#003300';
   context.stroke();
  </code></pre>