title: Fabric.js low FPS Animating Opacity on Multiple Objects
body: <p>I just started using Fabric.js and I have a page of rectangles that I want to animate the opacity of on mouseover, the problem is that the FPS is really low when I have more than a few tiles and the animation seems to take a lot longer than the 600ms its duration is set to. With 40 tiles it's showing about 5 frames throughout the animation and a delay before starting a new tile's animation. I'm wondering if there's anyway to optimize the code to speed up the FPS and get rid of the delay.</p>
  
  <p>Here's the javascript:</p>
  
  <pre><code>        var windowWidth = window.innerWidth;
          var windowHeight = window.innerHeight;
  
          var numTiles = 8;
          var tileSize = windowWidth/numTiles;
  
          var yTiles = Math.ceil(windowHeight/tileSize);
          var totalTiles = numTiles*yTiles;
  
          var canvas = new fabric.Canvas('c', { width: windowWidth, height: windowHeight });
  
          var rect = new Array();
          var row = 0;
          var column = 0;
  
          for(var n = 0; n &lt; totalTiles; n++) {
              if (n / numTiles % 1 == 0 &amp;&amp; n != 0) {
                  row++;
                  column = 0;
              }
  
              rect[n] = new fabric.Rect({
                  left: column,
                  top: row*tileSize,
                  fill: 'black',
                  width: tileSize,
                  height: tileSize,
                  selectable: false
              });
  
              canvas.add(rect[n]);
  
              canvas.on('mouse:over', function(e) {
                  e.target.animate('opacity', 0, {
                      onChange: canvas.renderAll.bind(canvas),
                      duration: 600
                  });
              });
  
              column += tileSize;
          }
  </code></pre>