javascript - Center Zoom out with canvas -

i'm iplementing zoom out effect of image. after it's scaled , zoom out, image isn't on center of canvas.

this code:

var canvas = document.getelementbyid('canvas'); var image = document.getelementbyid('image'); var ctx = canvas.getcontext("2d"); var zoomdelta = 0.025; // 10 steps in 10s, scale 5 1 var currentscale = 5;  var img = new image(); img.src = image.src; img.onload = function() {     ctx.canvas.width = img.width;     ctx.canvas.height = img.height; }  $("#start").on("click", function () {     ctx.translate(canvas.width / 2, canvas.height / 2);     drawimage();     var zoom1 = window.setinterval(         function() {             if(currentscale < 1)                 window.clearinterval(zoom1);             else                                     redraw();         }, 50     ); });  function redraw() {     currentscale -= zoomdelta;     drawimage(); }  function drawimage() {     clear();     ctx.save();     ctx.scale(currentscale, currentscale);     ctx.drawimage(img, -img.width / 2, -img.width / 2);     ctx.restore(); }  function clear() {     ctx.clearrect(-img.width / 2 - 2, -img.width / 2 - 2, img.width + 4, img.height + 4); } 

thanks in advance.

btw, fiddle: http://jsfiddle.net/huynq/rk2d7/

translate point on want center image.

a demo: http://jsfiddle.net/m1erickson/qeuw4/

var cx=canvas.width/2; var cy=canvas.height/2;  ctx.clearrect(0,0,canvas.width,canvas.height); ctx.save(); ctx.translate(cx,cy); ctx.scale(scale,scale); ctx.drawimage(img,-img.width/2,-img.height/2); ctx.restore();