title: Make Html5 Canvas and Its contained image responsive across browsers
body: <p>I have a canvas object that I want to put an image in for a web application. I can get the image loaded, but I've run into 2 problems: The image won't stretch to the canvas, and the canvas won't stretch to cover the entire div in any browser but Firefox. </p>
  
  <p><a href="http://jsfiddle.net/LFJ59/1/" rel="nofollow">http://jsfiddle.net/LFJ59/1/</a></p>
  
  <pre><code>var canvas = $("#imageView");
  var context = canvas.get(0).getContext("2d");
  
  $(document).ready(drawImage());
  $(window).resize(refreshCanvas());
  
  refreshCanvas();
  
  function refreshCanvas() {
      //canvas/context resize
      canvas.attr("width", $(window).get(0).innerWidth / 2);
      canvas.attr("height", $(window).get(0).innerHeight / 2);
      drawImage();
  };
  
  function drawImage() {
      //shadow
      context.shadowBlur = 20;
      context.shadowColor = "rgb(0,0,0)";
  
      //image
      var image = new Image();
      image.src = "http://www.netstate.com/states/maps/images/ca_outline.gif";
      $(image).load(function () {
          image.height = canvas.height();
          image.width = canvas.width();
          context.drawImage(image);
      });
  };
  </code></pre>
  
  <p>Is there a solution to making the canvas responsive? Or do I just need to lock the canvas and image down to predefined sizes?</p>