title: FabricJS - performance threading
body: <p>Sorry if the title was misleading, it's the closest approximation I could come up with, haha. </p>
  
  <p>Okay so I'm using FabricJS for a proof-of-concept for a fabric-printing client, and they require 300PPI images (i.e, freaking huge). Now, if you check the <a href="http://jsfiddle.net/dtxdzfks/" rel="nofollow">JsFiddle</a> I've popped in below you'll see the tiling is done with some while loops which seem to work fine, except for the fact that the whole browser freezes while loading, meaning I can't even stick up a loader icon. </p>
  
  <p>Have I done something horribly wrong, or is that just sorta how it works? The long loading times are fine as long as I can a) put up a loader and b) it doesn't, uh, "He's dead, Jim!" my Chrome. I'm getting the images with base64, if that helps at all. </p>
  
  <p>Cheers everyone! </p>
  
  <p><em>EDIT</em> For context, here's one of the functions that creates a pattern from an uploaded file:</p>
  
  <pre><code>function renderMirror(){
  showLoader();
  var isFullRows = false;
  var rowIndex = 0;
  var totalHeight = 0;
  
  while(isFullRows == false){
      // let's start with filling up the row's columns. start the width at zero.
      var totalWidth = 0;
      var isFullCols = false;
      var colIndex = 0;
  
      if(rowIndex % 2){
          var isRowMirrored = false;
      }else{
          var isRowMirrored = true;
      }
  
      while(isFullCols == false){
          colIndex++
  
          if(rowIndex == 1){
              console.log('row');
          }
  
          if(totalWidth &gt;= canvas.width){
              isFullCols = true;
          }
  
          if(colIndex % 2){
              var isColMirrored = false;
          }else{
              var isColMirrored = true;
          }
  
          canvas.add(new fabric.Rect({
              left: totalWidth,
              top: totalHeight,
              fill: pattern,
              flipX: isColMirrored,
              flipY: isRowMirrored,
              height: newImgHeight,
              width: newImgWidth,
              selectable: false
          }));
  
          totalWidth+= newImgWidth;
  
          // safeguard
          if(colIndex &gt; 100){
              isFullCols = true;
          }
      }
  
      // now instantiate the row.
      rowIndex++;
      if(totalHeight &gt;= canvas.height){
          isFullRows = true;
      }
  
      totalHeight+= newImgHeight;
  
      // safeguard
      if(rowIndex &gt; 100){
          isFullRows = true;
      }
  }
  hideLoader();
  }
  </code></pre>
  
  <p>The whole thing is <a href="http://jsfiddle.net/dtxdzfks/" rel="nofollow">here</a>, if you'd like to have a proper look?</p>