animation image - Fabric.js

animation image - Fabric.js

HTML

<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="c" width="600" height="400"></canvas>

CSS

canvas {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    margin: 5px;
}

JavaScript

var srcImg = "http://fabricjs.com/lib/pug.jpg";

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

fabric.Image.fromURL(srcImg, function (oImg) {
    canvas.add(oImg);
    oImg.set('left',0);
    oImg.set('top', 0);
    oImg.scale(.25);
    canvas.renderAll();

    // and then, we can animate the image    
    oImg.animate('left', 200, {
        onChange: canvas.renderAll.bind(canvas)
    });
});