Zoom

function clear() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() {
    clear();
    if (bMouseDown) {
        ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
        ctx.globalCompositeOperation = 'destination-atop';
        ctx.beginPath();
        ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
    
    ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}

function imageZoom(el) {
    
    // выборка картинки по ИД
    image = document.getElementById(el);
    
    // создание canvas
    canvas = document.createElement('canvas');
    canvas.width = image.clientWidth;
    canvas.height = image.clientHeight;
    ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.clientWidth, image.clientHeight);
    
    // добавление canvas напротив картинки
    image.parentNode.appendChild(canvas);
    image.style.display = "none";
    
    iZoomPower = 2, iZoomRadius = 100, bMouseDown = false;

    canvas.onmousemove = function(e){
        var canvasOffset = canvas.getBoundingClientRect();
        iMouseX = Math.floor(e.pageX - canvasOffset.left);
        iMouseY = Math.floor(e.pageY - canvasOffset.top);
    }

    canvas.onmousedown = function() {bMouseDown = true;};
    canvas.onmouseup = function() {bMouseDown = false;};

    setInterval(drawScene, 1000/30);
}

imageZoom("imageId"); // <img src="pic.jpg" id="imageId">