zoom jpeg изображение на холсте с событием mousewheel в javascript

Question

Я написал простой код в java-скрипте, который добавляет изображение JPEG на холст & добавьте строку на этом изображении с простым mousedown & mouseup event. Теперь я хотел добавить zoom-in & эффект уменьшения изображения на этом изображении. Кто-нибудь может мне помочь?

Мой js-файл выглядит, как показано ниже.

var canvas; 
var context; 
var width; 
var height; 
var finalPos = {x: 0, y: 0}; 
var startPos = {x: 0, y: 0}; 


function main() { 

    canvas = document.getElementById('imageCanvas'); 
    context = canvas.getContext('2d'); 
    loadImage(); 

    width = canvas.width; 
    height = canvas.height; 

    var canvasOffset = $('#imageCanvas').offset(); 
    function line(cnvs) { 
     cnvs.beginPath(); 
     cnvs.moveTo(startPos.x, startPos.y); 
     cnvs.lineTo(finalPos.x, finalPos.y); 
     cnvs.stroke(); 
    } 

    $('#imageCanvas').mousedown(function (e) { 
     context.strokeStyle = 'blue'; 
     context.lineWidth = 5; 
     context.lineCap = 'round'; 
     context.beginPath(); 
     startPos = {x: e.pageX - canvasOffset.left, y: e.pageY - canvasOffset.top}; 
    }); 

    $('#imageCanvas').mouseup(function (e) { 
     // Replace with var that is second canvas 
     finalPos = {x: e.pageX - canvasOffset.left, y: e.pageY - canvasOffset.top}; 
     line(context); 
    }); 
} 
; 

function loadImage() { 
    system_image = new Image(); 
    system_image.src = 'img/Google_OH_406TwentySecondStreet.jpg'; 

    system_image.onload = function() { 
     context.drawImage(system_image, 0, 0, width, height); 
    }; 
} 

Answer 1

Вы можете использовать масштаб функцию колесика мыши

context.scale(scaleValue, scaleValue); 

Вы должны сделать это до того DrawImage по контексту.

Я создал пример здесь: [ссылка]: http://jsfiddle.net/itsjawad/5wohz3r1/