title: Make Canvas element and all its children responsive for all screen sizes
body: <p>I am using fabricJS to add an image into a canvas element as can be seen here:</p>
  
  <p><a href="http://jsfiddle.net/97nu2/" rel="nofollow">http://jsfiddle.net/97nu2/</a></p>
  
  <pre><code>&lt;canvas id="canvas" width="800" height="450" style="border:1px solid #000000"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
  var canvas = new fabric.Canvas('canvas');
  fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function (oImg) {
      // scale image down, and flip it, before adding it onto canvas
      oImg.scale(1);
      canvas.add(oImg);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I need this to be fully responsive to all screen sizes though so it will fit on tablets, smart phones etc. I know it's a requirement to define the width and height in the HTML. </p>
  
  <p>Is it possible to resize the canvas element with css media queries or javascript while keeping all the images and elements inside the same ratio? Or do i have to create different canvases for each size? </p>