html5 - Zooming with canvas -

in test application have canvas simple rectangle on it. method draw called every 100ms.

as can see code i'm using mousewheel scale everything. happens is, scaled, i.e. when rectangle @ 10px,10px , have mouse right on rectangle not under mouse anymore after scaling. (which of course right because units scaled to.

but want is, mouseposition "center of zooming action" in google maps content under mouse before scaling, under mouse afterwards well. made few attemps translating, can't figure out, how that.

thanks in advance.

here's code:

 <script type="text/javascript">         var scroll = 0;         var scale = 1.0;                       /** high-level function.          * must react delta being more/less zero.          */         function handle(delta) {                  var canvas = document.getelementbyid("mycanvas");                 var ctx = canvas.getcontext("2d");                  scroll = delta;                 if(scroll > 0)                 {                     scale += 0.2;                 }                 if(scroll < 0)                 {                     scale -= 0.2;                 }           }          /** event handler mouse wheel event.          */         function wheel(event){                 var delta = 0;                 if (!event) /* ie. */                         event = window.event;                 if (event.wheeldelta) { /* ie/opera. */                         delta = event.wheeldelta/120;                 } else if (event.detail) { /** mozilla case. */                         /** in mozilla, sign of delta different in ie.                          * also, delta multiple of 3.                          */                         delta = -event.detail/3;                 }                 /** if delta nonzero, handle it.                  * basically, delta positive if wheel scrolled up,                  * , negative, if wheel scrolled down.                  */                 if (delta)                         handle(delta);                 /** prevent default actions caused mouse wheel.                  * might ugly, handle scrolls somehow                  * anyway, don't bother here..                  */                 if (event.preventdefault)                         event.preventdefault();             event.returnvalue = false;         }          /** initialization code.           * if use own event management code, change required.          */         if (window.addeventlistener)                 /** dommousescroll mozilla. */                 window.addeventlistener('dommousescroll', wheel, false);         /** ie/opera. */         window.onmousewheel = document.onmousewheel = wheel;          var drawx = 0;         var drawy = 0;         var overx = 0;         var overy = 0;           function startcanvas()          {              var mycanvas = document.getelementbyid("mycanvas");              var ctx = mycanvas.getcontext("2d");              ctx.canvas.width  = window.innerwidth;              ctx.canvas.height = window.innerheight;                               setinterval(draw,100);          }           function draw()          {             var canvas = document.getelementbyid("mycanvas");             var ctx = canvas.getcontext("2d");              ctx.clearrect(0,0,window.innerwidth,window.innerheight);             ctx.save();             ctx.scale(scale,scale);             ctx.fillrect(drawx,drawy,20,20);             //ctx.translate(-scale,-scale);             ctx.restore();             ctx.font="20pt arial";               ctx.filltext(scale+":"+drawx,0,150);                          }           function canvasclick(event)          {             console.log(event.layerx+"/"+scale);             drawx = event.layerx/scale;             drawy = event.layery/scale;          }           function canvasover(event)          {             console.log("over");             overx = event.layerx;             overy = event.layery;          }      </script> 

it's non-trivial math question, known "zoom point"

take @ here canvas user wanted same thing , found way.

<canvas id="canvas" width="800" height="600"></canvas> <script type="text/javascript"> var canvas = document.getelementbyid("canvas"); var context = canvas.getcontext("2d"); var scale = 1; var originx = 0; var originy = 0;  function draw(){     context.fillstyle = "white";     context.fillrect(originx,originy,800/scale,600/scale);     context.fillstyle = "black";     context.fillrect(50,50,100,100); } setinterval(draw,100);  canvas.onmousewheel = function (event){     var mousex = event.clientx - canvas.offsetleft;     var mousey = event.clienty - canvas.offsettop;     var wheel = event.wheeldelta/120;//n or -n      var zoom = 1 + wheel/2;      context.translate(         originx,         originy     );     context.scale(zoom,zoom);     context.translate(         -( mousex / scale + originx - mousex / ( scale * zoom ) ),         -( mousey / scale + originy - mousey / ( scale * zoom ) )     );      originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );     originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );     scale *= zoom; }  </script>