Fabric.js demo

This is copied from the demo at http://kangax.github.com/fabric.js/demos/cross/index.html

HTML

<script src="http://kangax.github.com/fabric.js/dist/all.js"></script>
<canvas id="c"></canvas>

JavaScript

var Cross = fabric.util.createClass(fabric.Object, {
  initialize: function(options) {
    this.callSuper('initialize', options);
    this.animDirection = 'up';

    this.width = 100;
    this.height = 100;

    this.w1 = this.h2 = 100;
    this.h1 = this.w2 = 30;
  },

  animateWidthHeight: function(stepSize /* measured in ms */ ) {
    var interval = Math.round(stepSize / 5);

    if (this.h2 >= 30 && this.h2 <= 100) {
      var actualInterval = (this.animDirection == 'up' ? interval : -interval);
      this.h2 += actualInterval;
      this.w1 += actualInterval;
    }

    if (this.h2 >= 100) {
      this.animDirection = 'down';
      this.h2 -= interval;
      this.w1 -= interval;
    }

    if (this.h2 <= 30) {
      this.animDirection = 'up';
      this.h2 += interval;
      this.w1 += interval;
    }
  },

  _render: function(ctx) {
    ctx.fillRect(-this.w1 / 2, -this.h1 / 2, this.w1, this.h1);
    ctx.fillRect(-this.w2 / 2, -this.h2 / 2, this.w2, this.h2);
  }
});

$('#c').attr('width', $(window).width() - 20);
$('#c').attr('height', $(window).height() - 20);

var canvas = new fabric.Canvas('c', {
  selection: false
});

canvas.add(
  new Cross({
    top: 100,
    left: 100
  }),
  new Cross({
    top: 140,
    left: 230
  }),
  new Cross({
    top: 300,
    left: 210
  })
);

var lastStepTime = new Date(),
  requestAnimationFrame = window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame;

requestAnimationFrame(function step(time) {
  var stepTime = new Date(),
    stepSize = stepTime - lastStepTime;
  lastStepTime = stepTime;

  canvas.forEachObject(function(obj) {
    obj.animateWidthHeight(stepSize);
  });
  canvas.renderAll();

  requestAnimationFrame(step);
});