title: jQuery to make HTML5 Canvas Responsive
body: <p>How can I make my HTML5 Animation (Canvas) responsive using jQuery ? </p>
  
  <p>Since my Canvas is 1100px Width by 800px Height (for a greater effect on bigger screens) I the canvas to start resizing  for screens smaller than 1200 px width.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;canvas id="canvas" width="1100" height="800" style="background-color:#ffffff"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>Script :</strong></p>
  
  <pre><code>var canvas, stage, exportRoot;
  
      function init() {
          canvas = document.getElementById("canvas");
          images = images||{};
  
          var manifest = [
              {src:"images/preloader/_282.png", id:"_282"},
              {src:"images/preloader/Bitmap10.png", id:"Bitmap10"},
              {src:"images/preloader/Bitmap11.png", id:"Bitmap11"},
              {src:"images/preloader/Bitmap12.png", id:"Bitmap12"},
              {src:"images/preloader/Bitmap13.png", id:"Bitmap13"},
              {src:"images/preloader/Bitmap14.png", id:"Bitmap14"},
              {src:"images/preloader/Bitmap15.png", id:"Bitmap15"},
              {src:"images/preloader/Bitmap16.png", id:"Bitmap16"},
              {src:"images/preloader/Bitmap17.png", id:"Bitmap17"},
              {src:"images/preloader/Bitmap18.png", id:"Bitmap18"},
              {src:"images/preloader/Bitmap2.png", id:"Bitmap2"},
              {src:"images/preloader/Bitmap3.png", id:"Bitmap3"},
              {src:"images/preloader/Bitmap4.png", id:"Bitmap4"},
              {src:"images/preloader/Bitmap5.png", id:"Bitmap5"},
              {src:"images/preloader/Bitmap6.png", id:"Bitmap6"},
              {src:"images/preloader/Bitmap7.png", id:"Bitmap7"},
              {src:"images/preloader/Bitmap8.png", id:"Bitmap8"},
              {src:"images/preloader/Bitmap9.png", id:"Bitmap9"},
              {src:"images/preloader/flash0aiAssets.png", id:"flash0aiAssets"}
          ];
  
          var loader = new createjs.LoadQueue(false);
          loader.addEventListener("fileload", handleFileLoad);
          loader.addEventListener("complete", handleComplete);
          loader.loadManifest(manifest);
      }
  
      function handleFileLoad(evt) {
          if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
      }
  
      function handleComplete() {
          exportRoot = new lib.preloadercs6();
  
          stage = new createjs.Stage(canvas);
          stage.addChild(exportRoot);
          stage.update();
  
          createjs.Ticker.setFPS(24);
          createjs.Ticker.addEventListener("tick", stage);
      }
  </code></pre>
  
  <p><strong>PS:</strong>
  Also, if there is any other way of doing it even without using jQuery, I'm open to whatever can solve my problem.</p>
  
  <p>Thanks</p>
  
  <h2><strong>UPDATE</strong></h2>
  
  <p>I found something and put it together but it doesn't work :</p>
  
  <pre><code>(function($){
    $(window).resize(function(){
       windowResize();                      
    });         
  })(jQuery);
  
  function windowResize(){
     stage.canvas.width = window.innerWidth;
     stage.canvas.height = window.innerHeight;    
     var test = (window.innerHeight/800)*1;
     exportRoot.scaleX = exportRoot.scaleY = test;
  }
  </code></pre>