HTML5 Canvas Example

HTML

<div id="imageContainer">
    <div class="active">
        <canvas id="canvas"></canvas>
        <canvas id="canvasZoom"></canvas>
    </div>
</div>

JavaScript

$(document).ready(function() {
    var canvasZoom = document.getElementById('canvasZoom');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();

    loadImage = function(src) {

        img.crossOrigin = '';
        img.src = src;

        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.restore();
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
    }
    loadImage("https://www.jqueryscript.net/images/Touch-enabled-Signature-Plugin-with-jQuery-Canvas.jpg");

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
    canvas.addEventListener('mousemove', function(e) {
        $("#canvasZoom").show();
        $('#canvasZoomm').css({
            left: e.pageX - 150,
            top: e.pageY
        });
        var mousePos = getMousePos(canvas, e);
        console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y)
        //grab the context from your destination canvas
        var ctxZoom = canvasZoom.getContext('2d');
        ctxZoom.scale(2, 2);//Not Working



        ctxZoom.putImageData(ctx.getImageData(mousePos.x - 150, mousePos.y - 60, 500, 500), 0, 0);
         ctxZoom.scale(2, 2);//Not Working
        ctx.restore();

    });
    canvas.addEventListener('mouseout', function(e) {
        //$("#canvasZoom").hide('slow');
    });

});