Zoom sur toile HTML5 où les coordonnées de la souris

Question

Comment zoomer l'image de fond avec des dessins où les coordonnées de la souris.

Zooming uniquement dans le centre avec l'événement de la souris mousewheel

me code: http://jsfiddle.net/gamealchemist/74MCQ/4/

Dessins avec mousedown et mousemove événement

J'ai besoin zoom où la position de la souris sur l'image comme un Google Maps.

Answer 1

Code annoté et une démo: http://jsfiddle.net/m1erickson/asT8x/

// clear the canvas 

ctx.clearRect(0,0,canvas.width,canvas.height); 

// save the context state 

ctx.save(); 

// translate to the coordinate point you wish to zoom in on 

ctx.translate(mouseX,mouseY); 

// scale the canvas to the desired zoom level 

ctx.scale(scale,scale); 

// draw the image with an offset of -mouseX,-mouseY 
// (offset to center image at the selected zoom point); 

ctx.drawImage(img,-mouseX,-mouseY); 

// restore the context to its untranslated/unrotated state 

ctx.restore();