title: How can I scale an HTML5 canvas to the size of the container wrapping it?
body: <p>Currently I have an HTML5 canvas that is a fixed size, something like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;canvas id="example" width="350" height="250"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However I want to be able to scale the canvas so that it is the same size as the container around it, obviously it still has to keep the same aspect ratio. I also want it to be fluid so that if a user resizes the browser then the canvas will scale with the fluid container.</p>
  
  <p>So for example if my container was set to a width of 500px then the width of the canvas would scale to the same size. Eg:</p>
  
  <pre><code>&lt;div class="container" style="width:500px;"&gt;
  &lt;canvas id="example"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For example the canvas would get a width of 500px to match the container and the height would automatically be set to 357px which keeps the same aspect ratio.</p>
  
  <p>I believe this could be achieved with some javascript, I just do not know how to do it ...
  I hope I have provided enough info for someone to help me. Would appreciate it if someone could whip up a jsfiddle and provide some example code of it working if possible.</p>
  
  <p>Thanks.</p>