Làm cho hình ảnh phóng to khi di chuột qua trên HTML5 Canvas

Để làm cho hình ảnh phóng to khi di chuột qua, hãy sử dụng thư viện Vanilla JavaScript.

Trong sự kiện mousemove, thiết lập như sau:

function move(e) {
    var pos = getMousePos(myCanvas, e);
    context.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

Cho canvas:

// add event listener
myCanvas.addEventListener('mouseout', display, false);
myCanvas.addEventListener('mousemove', move, false);

function display() {
    context.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}