Making an image scale mouse over on HTM5


To make an image scale on mouse over, use Vanilla JavaScript library.

On mouse move, set it like the following:

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

For canvas:

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


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

Samual Sam
Samual Sam

Learning faster. Every day.

Updated on: 29-Jan-2020

243 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements