title: Recreate Fabric.js canvas and export as an image?
body: <p>I have a canvas where the user can create a design using images in another <code>div</code> that they click, sending it to the Fabric.js canvas where it gets moved around and so on. Since the canvas's size is <code>width="270"</code>and <code>height="519"</code>, smaller than what the finished product is, I need to recreate it with a canvas that has the size <code>width="1001"</code>and <code>height="1920"</code> and then screenshot it so that I get it all in 1 single image. How do I do this?</p>
  
  <p>This is what my code looks like so far:</p>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;div id="CanvasContainer"&gt;
      &lt;canvas id="Canvas" width="270" height="519"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>CSS</em></strong></p>
  
  <pre><code>#CanvasContainer {
      width: 270px;
      height: 519px;
      margin-left: 15px;
  }
  #Canvas {
      overflow: hidden;
  }
  </code></pre>
  
  <p><strong><em>JAVASCRIPT</em></strong></p>
  
  <pre><code>//Defining Canvas and object array
  var canvas = new fabric.Canvas('Canvas');
  
  //When clicked
  $(document).ready(function () {
      $("#Backgrounds img").click(function () {
          var getId = $(this).attr("id");
  
          //adding all clicked images
          var imgElement = document.getElementById(getId);
          var imgInstance = new fabric.Image(imgElement, {
              left: 135,
              top: 259,
              width: 270,
              height: 519
          });
          //Corner color for clicked images
          imgInstance.set({
              borderColor: 'white',
              cornerColor: 'black',
              transparentCorners: false,
              cornerSize: 12
          });
          canvas.add(imgInstance);
      });
  });
  </code></pre>