Making An Image Scale On Mouse Over On A

I have a canvas, and I've drawn an image on it: var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0); }; imageObj.src = 'http://localhos

Solution 1:

The key to "zooming" is to show the user an image at half resolution.

Then to "magnify" you pop-up a secondary canvas showing a portion of the full resolution image in a smaller "viewport".

You might use this as a starting point.

It's built using KineticJS but the code would be the same in straight Canvas/JS.

Kinetic JS image Magnifier

Solution 2:

Canvas doesn't have a "scene graph". It forgets what you did instantly after you've done it. It's all just pixels, so canvas doesn't know there's any image to hover or scale.

context.scale() doesn't affect any previous operations. It only changes coordinates/sizes for later drawing commands.

You can't attach mouse handlers to things on canvas or modify them after they've been drawn. You have to handle mouse yourself and redraw the canvas yourself.

If you don't do anything much more complex than this, then <canvas> is a bad tool for the task. You may be better off using <img> and CSS :hover or a bit of JS changing style.width.

You could also achieve that with SVG, which does have scene graph and mouse event handlers.