title: Canvas responsive media screen min-width - FabricJS
body: <p>I trying adjust canvas for each resolution, so I first using css and put medias screens for each resolution.</p>
  
  <pre><code>@media screen and (min-width: 320px) {
    #c {   -webkit-transform : scale(0.38);
  -webkit-transform-origin : 0 0; }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/qj3oyzs8/" rel="nofollow">https://jsfiddle.net/qj3oyzs8/</a></p>
  
  <p>It work for me, but all object not drag, resize or rotable properly.
  One solution is apply zoomOut and zoomIn, eg:</p>
  
  <p><a href="http://jsfiddle.net/Q3TMA/662/" rel="nofollow">http://jsfiddle.net/Q3TMA/662/</a></p>
  
  <p>Now I need help for know How capture resolution for open correctly canvas scale in the browser</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code>function screencan() {
     var widthscrencan = (window.innerWidth &gt; 0) ? window.innerWidth : screen.width;
  
  /*
  
  In if has to have the same scale the css
  @media screen and (min-width: 320px) {
    #c {   -webkit-transform : scale(0.38);
  -webkit-transform-origin : 0 0; }
  }
  
  
  */
      if(widthscrencan &lt;= 360 ) {
             // Zoom Out
  
  
   function zoomOut() {
          // TODO limit max cavas zoom out
  
          canvasScale = canvasScale / SCALE_FACTOR;
  
          canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
          canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));
  
          var objects = canvas.getObjects();
          for (var i in objects) {
              var scaleX = objects[i].scaleX;
              var scaleY = objects[i].scaleY;
              var left = objects[i].left;
              var top = objects[i].top;
  
              var tempScaleX = scaleX * (1 / SCALE_FACTOR);
              var tempScaleY = scaleY * (1 / SCALE_FACTOR);
              var tempLeft = left * (1 / SCALE_FACTOR);
              var tempTop = top * (1 / SCALE_FACTOR);
  
              objects[i].scaleX = tempScaleX;
              objects[i].scaleY = tempScaleY;
              objects[i].left = tempLeft;
              objects[i].top = tempTop;
  
              objects[i].setCoords();
          }
  
          canvas.renderAll();        
      }
  
      }               
   }
   window.onload = screencan;
  </code></pre>
  
  <p>It not work</p>
  
  <p>Thanks for any help</p>