ZoomIn ZoomOut in Fabric.js

Fork from http://jsfiddle.net/dudih/y0z33gym/ https://groups.google.com/forum/#!topic/fabricjs/FQ0EWKHNG90

by duckywang1

HTML

<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
    <button id="btnZoomIn">ZoomIn</button>
    <button id="btnZoomOut">ZoomOut</button>
    <button id="btnResetZoom">Reset Zoom</button>
    <button id="btnZoomToRight">Canvas: &#8594;</button>
    <button id="btnZoomToLeft">Canvas: &#8592;</button>
    <button id="btnZoomToUp">Canvas: &#8593;</button>
    <button id="btnZoomToDown">Canvas: &#8595;</button>
    <button id="btnZoomInByMouse">mouse: zoom-in</button>
    <button id="btnZoomOutByMouse">mouse: zoom-out</button>
    <button id="btnPanModeByMouse">mouse: Pan-mode</button>
    <span id="zoomByMouseStatus" style="border: 1px solid blue; color: blue; background-color: yellow;">No-Zoom</span>
    <br/>
    <canvas id="c" width="640" height="480"></canvas>

CSS

div.canvas-container{
    max-width: 640px;
    max-height: 480px;
    overflow: hidden;
    /*border: 1px solid red;*/
}
canvas{
    /*border-width: 1px solid black;*/
}

JavaScript

var src = "http://fieldbit.net/images/fieldbit_small_logo.png";

var SCALE_FACTOR = 1.3; //on clicking zoom, enlarge canvas in 30%. TBD

var zoomInByMouse = false;
var zoomOutByMouse = false;
var PanModeByMouse = false;

var zoomMax = 23;   //TBD
var mouseDown;

var canvasHeight = 480;
var canvasWidth = 640;


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

var getFabricCanvases = (function () {
    var fabricCanvasCollection;
    return function getCanvases() {
        if (!fabricCanvasCollection) {
            fabricCanvasCollection = [];
            var fabricCanvas = $('.canvas-container canvas');
            fabricCanvas.each(function(index, item) {
                fabricCanvasCollection.push($(item));
            });
        }
        return fabricCanvasCollection;
    }
})();

canvas.on('mouse:down', function(e){
    if( zoomInByMouse ) {
        zoomByMouseCoords(e, "in");
    } else if( zoomOutByMouse ) {
        zoomByMouseCoords(e, "out");
    }
    else {
        mouseDown = true;
    }
});

canvas.on('mouse:up', function () {
    console.log("canvas.on(mouse:up):: up");
    mouseDown = false;
});

//canvas.backgroundColor = "#00fa00";
canvas.setBackgroundImage('https://fieldbit.s3.amazonaws.com/53/marker_image-33-4e5ee49e-35c5-4f8b-8431-1117ba51a9c4', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});

canvas.on('mouse:move', function (e) {
    if (PanModeByMouse && mouseDown){
        console.log("canvas.on(mouse:move):PanModeByMouse:: movementX: " + e.e.movementX +", " +e.e.movementY);
        panToByMouseCoords(e.e.movementX, e.e.movementY);
    }
});

// text
var text = new fabric.Text('Fieldbit Note', {
    left: 200,
    top: 50
});
text.hasRotatingPoint = true;
canvas.add(text);

// circle
var circle = new fabric.Circle({
    left: 200,
    top: 150,
    radius: 50,
    fill: "#dde000"
});
circle.hasRotatingPoint = true;
canvas.add(circle);

//image
fabric.util.loadImage(src, function(img)...