fabric.js/site/posts/benchmarks/_posts/2011-9-1-raphael-vs-fabric-simple.html

---
layout: benchmark
title: vs. Raphael (Simple Shape)
---

<style>
  svg {
    border: 1px solid #000;
  }
  .canvas-container {
    display: block;
  }
  #bd-wrapper ul, #bd-wrapper ul li { display: inline-block; }
</style>
<script src="/lib/raphael-min.js"></script>
<script>
  function getRandomNum(min, max) {
    return Math.random() * (max - min) + min;
  }
  
  var numObjects = parseInt(document.location.search.slice(1), 10) || 200,
      radius = 20,
      width = 500,
      height = 500;
      
  window.onload = function() {
    
    var logEl = document.getElementById('log');
    
    document.getElementById('numshapes').innerHTML = numObjects;
    
    (function testRaphael() {
      
      var paper = Raphael(550, 161, width, height),
          startTime = new Date(),
          circle;
      
      var start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
        this.attr({opacity: .5});
      },
      move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
      },
      up = function () {
        // restoring state
        this.attr({opacity: 1});
      };

      for (var i = numObjects; i--; ) {
        circle = paper.circle(getRandomNum(0, width), getRandomNum(0, height), radius);
        circle.attr('fill', 'red');
        circle.attr('stroke', 'blue');            
        circle.drag(move, start, up);
      }
      
      logEl.innerHTML = 'Raphael: <b class="bench">' + (new Date() - startTime) + '</b> ms<br>';
      
    })();
    
    (function testFabric() {
      
      var canvas = window.__canvas = new fabric.Element('canvas', { 
            renderOnAddition: false, 
            stateful: false,
            HOVER_CURSOR: 'default'
          }),
          Circle = fabric.Circle,
          startTime = new Date(),
          circle;
      
      canvas.observe({
        'object:selected': function(e) {
          e.memo.target.setOpacity(0.75);
        },
        'mouse:up': function(e) {
          if (e.memo.target) {
            e.memo.target.setOpacity(1);
            canvas.renderAll();
          } 
        }
      });
      
      for (var i = numObjects; i--; ) {
        var c = new Circle({ 
          radius: radius,
          left: getRandomNum(0, width), 
          top: getRandomNum(0, height),
          fill: 'red',
          stroke: 'blue'
        });
        c.hasControls = c.hasBorders = false;
        canvas.add(c);
      }
      canvas.renderAll();
      canvas.calcOffset();
      
      logEl.innerHTML += 'fabric: <b class="bench">' + (new Date() - startTime) + '</b> ms';
      
    })();
  };
  
  function reload(num) {
    document.location.search = '?' + num;
    return false;
  }
</script>

Rendering a large number (<span id="numshapes"></span>) of simple shapes
<ul>
  <li><a href="#" onclick="return reload(10)">10 shapes</a></li>
  <li><a href="#" onclick="return reload(100)">100 shapes</a></li>
  <li><a href="#" onclick="return reload(500)">500 shapes</a></li>
  <li><a href="#" onclick="return reload(1000)">1000 shapes</a></li>
  <li><a href="#" onclick="return reload(2000)">2000 shapes</a></li>
  <li><a href="#" onclick="return reload(5000)">5000 shapes</a></li>
</ul>
<canvas id="canvas" width="500" height="500"></canvas>
<p id="log"></p>