FabricJS exemple

by Atinux

HTML

<canvas id="c"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
// canvas.isDrawingMode = true;

// create a rectangle with angle=45
var rect = new fabric.Rect({
  left: 0,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
  angle: 0,
  lockUniScaling: true,
  lockScalingX: true,
  lockScalingY: true
});

canvas.add(rect);

var left = 0;
var speed = 800;

var animate = function () {
    left += 200;
    speed -= 50;
    if (speed <= 50)
        speed = 800;
    var color = Math.round(speed / 800 * 255);
    console.log(color);
    rect.set({
        fill: 'rgb('+color+','+color+','+color+')'
    });
    rect.animate('left', left % 400, {
      onChange: canvas.renderAll.bind(canvas),
      onComplete: animate,
      duration: speed,
//      easing: fabric.util.ease.easeOutBounce
    });
};
animate();