title: How to scale object dynamically up to canvas size in Fabric.js
body: <p>I want to increase height and width of my svg image same as canvas height and width so that it look like background image of canvas. When I press Set Background button, one svg image will be set to canvas from my directory. I want to scale this image up to canvas height and width dynamically.</p>
  
  <p>Expected Output: <a href="http://cutting-edge.bluecoresys.com/test/after.PNG">I want this</a></p>
  
  <h2>Html</h2>
  
  <pre><code>&lt;h1&gt;canvas&lt;/h1&gt;
  &lt;canvas style="left: -300px; border: 1px dotted;" height="385" width="400" id="c"&gt;&lt;/canvas&gt;
  &lt;input type="button" id="svg3" value="set background" /&gt;
  </code></pre>
  
  <h2>Script</h2>
  
  <pre><code>$(document).ready(function(){
      var canvas = new fabric.Canvas('c');
      var colorSet="red";
      $("#svg3").click(function(){
          fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', function (objects, options) { 
              var shape = fabric.util.groupSVGElements(objects, options);
              shape.set({
                  left: 150,
                  top:200,
                  //height: 700,
                  //width: 700,
                  scaleX: .35,
                  scaleY:.35
              });
  
              if (shape.isSameColor &amp;&amp; shape.isSameColor() || !shape.paths) {
                  shape.setFill(colorSet);
              } else if (shape.paths) {
                  for (var i = 0; i &lt; shape.paths.length; i++) {
                      shape.paths[i].setFill(colorSet);
                  }
              }
  
              canvas.add(shape);
              canvas.renderAll();
          });
      });
  });
  </code></pre>
  
  <p>Here is my <a href="http://jsfiddle.net/hxjZa/4/">FIDDLE Demo</a>.</p>
  
  <p>Does anybody have an idea how to do this?</p>