ZoomIn ZoomOut in Fabric.js

https://groups.google.com/forum/?fromgroups#!topic/fabricjs/WQ0jegaIFCY

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>
    <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;
    /*border: 1px solid red;*/
    overflow: hidden;
}
canvas{
    border-width: 1pz;
    border-style: solid;
    border-color: #000;
}

JavaScript

var src = "http://fieldbit.net/images/fieldbit_small_logo.png";
var copiedObject;
var copiedObjects = new Array();
var SCALE_FACTOR = 1.3; //on clicking zoom, enlarge canvas in 30%. TBD

var zoomInByMouse = false;
var zoomOutByMouse = false;
var zoomMax = 23;   //TBD

var canvasHeight = 480; //TBD
var canvasWidth = 640;  //TBD


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

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

function zoomByMouseCoords(event, direction)
{
    //if selectable element was clicked, don't zoom, just return:
    /*if (canvas.getActiveObject()) {
        return false;
    }*/

    if( !direction || !event.e ) return;

    var pointer = canvas.getPointer(event.e);
    console.log("zoomByMouseCoords: direction: " +direction +", p.x: " +pointer.x +", p.y:" + pointer.y +", canvas.width: " +canvas.getWidth());

    if( direction.toLowerCase() == "in" ){
        if(canvas.getZoom() > zoomMax){
            console.log("zoomByMouseCoords: Error: cannot zoom-in anymore");
            return;
        }
        zoomIn();
    }
    if( direction.toLowerCase() == "out" ){
        if( canvas.getZoom()<=1 ){
            console.log("zoomByMouseCoords: Error: cannot zoom-out anymore");
            return;
        }
        zoomOut();
    }
    zoomToPosition( zoomInCalcXpos(pointer.x), zoomInCalcYpos(pointer.y));
}

canvas.backgroundColor = "#00fa00";

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

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

//image
fabric.util.loadImage(src, function(img) {
    var object = new fabric.Image(img);
    object.set({
        left: 200,
        top: 300
    });
    object.hasRotatingPoint = true;
    object.scaleX =...