Canvas zoom

by Andy Bulka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<canvas id="imageCanvas" width='800' height='600'>Your browser does not support HTML5 Canvas</canvas>

JavaScript

var img = document.createElement("img");
img.src ="http://www.twentyonepilots.com/sites/g/files/g2000004896/f/Sample-image10-highres.jpg";
var canvas = window._canvas = new fabric.Canvas("imageCanvas");

$(img).on('load',function(){
    image = new fabric.Image(img, {
        centeredRotation: true,
        centeredScaling: true,
        top: 0,
        left: 0
    });
    canvas.add(image);
});

canvas.on("mouse:move", function(event) {
    currentMouseY = Math.round(event.e.y - canvas._offset.top);
    currentMouseX = Math.round(event.e.x - canvas._offset.left);
});

function zoom(delta, target) {         
    var factor = 0.8;
    if (delta < 0) {
        factor = 1/factor;
    }
    
    // Zoom into the image.
    image.setScaleX(image.getScaleX() * factor);
    image.setScaleY(image.getScaleY() * factor);
    // Calculate displacement of zooming position.
    var dx = (currentMouseX - image.getLeft()) * (factor - 1),
        dy = (currentMouseY - image.getTop()) * (factor - 1);
    // Compensate for displacement.
    image.setLeft(image.getLeft() - dx);
    image.setTop(image.getTop() - dy);
    
    canvas.renderAll();
}   

$(canvas.wrapperEl).on("mousewheel", function (event) {
    var target = canvas.findTarget(event);
    if (target) {
        var delta = event.originalEvent.wheelDelta / 120;
        zoom(delta, target); 
    };
    event.preventDefault() && false;
});