javascript - how perform zooming inside canvas image and the zooming should be centralized -

 <div id="panid" class="moveable">      <canvas id="canvas" class="mg_image">         <img name="imagename2" id="mainimage" class="imagepics"                *ngif="showimage"                 src="{{imagevisible ? droppedimage: firtsimagetobind}}">               </canvas>         </div> 

my typescript code given below.

 foractivatezooming(event: mouseevent) {      document.getelementbyid('panid').style.cursor = "zoom-in";      this.showimage = true;     this.imagevisible = false;           var zoomintensity = 5;      var canvas = <htmlcanvaselement>document.getelementbyid("canvas");       var image = document.getelementbyid("mainimage");       var context = canvas.getcontext("2d");      context.moveto(0, 0);       var img = document.getelementbyid("mainimage");      var srcofimg = img.attributes.getnameditem('src').value;         var width = 2000;     var height = 2000;      var scale = 10;     var originx = 0;     var originy = 0;     var visiblewidth = width;     var visibleheight = height;      var count = 10;      canvas.onmousewheel = function (event) {         event.preventdefault();          // mouse offset.         //   var mousex = event.clientx - canvas.offsetleft;         //   var mousey = event.clienty - canvas.offsettop;         var offset = $(this).offset();         var mousex = event.clientx - offset.left;         var mousey = event.clienty - offset.top;           // normalize wheel +1 or -1.         var wheel = event.wheeldelta / 120;          // compute zoom factor.         var zoom = math.exp(wheel * zoomintensity);          // translate visible origin @ context's origin.         context.translate(originx, originy);          // compute new visible origin. mouse @         // distance mouse/scale corner, want point under         // mouse remain in same place after zoom,         // @ mouse/new_scale away corner. therefore need         // shift origin (coordinates of corner) account this.         originx -= mousex / (scale * zoom) - mousex / scale;         originy -= mousey / (scale * zoom) - mousey / scale;          // alert(originx);         // alert(originy);          // alert(zoom);          // scale (centered around origin due trasnslate above).         context.scale(originx, originy);         // offset visible origin it's proper position.         context.translate(-originx, -originy);          var ratio = 5;         var vpx = 0;         var vpy = 0;         var vpw = window.innerwidth;         var vph = window.innerheight;          var orig_width = 2000;         var orig_height = 2000;          //var width = 4000         //var height = 4000                       if (event.wheeldelta >= 120) {                canvas.width = canvas.width * ratio;              canvas.height = canvas.height * ratio;              // var u_top = $('.mg-image').offset().top;             // var u_left = $('.mg-image').offset().left;             // alert(u_top);             // alert(u_left);              //  $('.mg-image').css('left', '10%');             //  $('.mg-image').css('top', '10%');              //var ratio = image.clientheight / image.clientwidth;             var curleft = image.offsetleft;             // alert(curleft);             var curtop = image.offsettop;             // alert(curtop);              // $('.mg_image').css({             //     height: image.clientheight + (20 * ratio),             //     width: image.clientwidth + (20 * ratio),             //     left: curleft - ((20 * ratio) / 2),             //     top: curtop - ((20 * ratio) / 2)             // });               // zoom center point             // var targetx = event.clientx || (vpw / 2);             // var targety = event.clienty || (vph / 2);              // // percentages side             // var px = ((vpx * -1) + targetx) * 100 / width;             // var py = ((vpy * -1) + targety) * 100 / height;              // // translate view center point             // var x = ((width * px / 100) - targetx);             // var y = ((height * py / 100) - targety);               // $('.mg_image').css({             //     // height: image.clientheight + (20 * ratio),             //     //  width: image.clientwidth + (20 * ratio),             //     left: curleft - ((20 * ratio) / 2),             //     top: curtop - ((20 * ratio) / 2)             // });              // var position = $('.mg_image').position();              // //alert(position.left);             // //alert(position.top);             // var newleft = position.left - 10;             // var newtop = position.top - 10;               // canvas.style.top = newleft + '0%';             // canvas.style.left = newtop + '0%';               // $('#canvas').css({             //     height: offsetheightvalue - 5,             //     width: offsetwidthvalue - 5,             //     left: offsetleftvalue - 5,             //     top: offsettopvalue - 5             // });              //  resizecall(++count);          }         else if (event.wheeldelta <= -120) {             // canvas.width = canvas.width / ratio;             // canvas.height = canvas.height / ratio;                // var u_top = $('.mg-image').offset().top;             // var u_left = $('.mg-image').offset().left;               // alert(u_top);             // alert(u_left);             // $('.mg-image').css('left', u_left--);             // $('.mg-image').css('top', u_top--);               // var ratio = image.clientheight / image.clientwidth;             var curleft = image.offsetleft;             // alert(curleft);             var curtop = image.offsettop;             // alert(curtop);                var offsetleftvalue = canvas.offsetleft;             var offsettopvalue = canvas.offsettop;             var offsetheightvalue = canvas.offsetheight;             var offsetwidthvalue = canvas.offsetwidth;               canvas.width;             canvas.height;              // $('#canvas').css({             //     align: offsetheightvalue - 5,             //     width: offsetwidthvalue - 5,             //     left: offsetleftvalue - 5,             //     top: offsettopvalue - 5             // });              // $('.mg_image').css({             //     height: image.clientheight + (20 * ratio),             //     width: image.clientwidth + (20 * ratio),             //     left: curleft - ((20 * ratio) / 2),             //     top: curtop - ((20 * ratio) / 2)             // });              // // zoom center point             // var targetx = event.clientx || (vpw / 2);             // var targety = event.clienty || (vph / 2);              // // percentages side             // var px = ((vpx * -1) + targetx) * 100 / width;             // var py = ((vpy * -1) + targety) * 100 / height;              // // translate view center point             // var x = ((width * px / 100) - targetx);             // var y = ((height * py / 100) - targety);               // $('.mg_image').css({             //     // height: image.clientheight + (20 * ratio),             //     //   width: image.clientwidth + (20 * ratio),             //     left: curleft - ((20 * ratio) / 2),             //     top: curtop - ((20 * ratio) / 2)             // });               //alert(position.left);             //alert(position.top);              // var position = $('.mg_image').position();             // var newleft = position.left - 10;             // var newtop = position.top - 10;               // canvas.style.top = newleft + '0%';             // canvas.style.left = newtop + '0%';              //  resizecall(--count);             return false;         }        }      function resizecall(c: any) {          var img = <htmlcanvaselement>document.getelementbyid('mainimage');           var sizewidth = context.canvas.clientwidth;         var sizeheight = context.canvas.clientheight;          //  var x = event.pagex;         //  var y = event.pagey;          // var width = canvas.width;         // var height = canvas.height;          //context.scale(x + width / 2, y + height / 2);             // alert(c);             // img.style.zoom = c + '0%';           // canvas.width = 2000;         //  canvas.height = 2000;          // alert(canvas.getboundingclientrect());          // var context = canvas.getcontext("2d");           // var ratio = canvas.height / canvas.width;         // var curleft = canvas.offsetleft;         // //alert(curleft);         // var curtop = canvas.offsettop;         // // alert(curtop);          // $('.mg_image').css({         //     //  height: canvas.height + (20 * ratio),         //     //  width: canvas.width + (20 * ratio),         //     left: curleft - ((50 * ratio) / 2),         //     top: curtop - ((50 * ratio) / 2)         // });          //context.moveto(0, 0);          canvas.style.zoom = c + '0%';              // canvas.style.left = c  ;         // canvas.style.top = c ;         //canvas.width = sizewidth + c;          //  canvas.height = sizeheight +c;           //  img.width =  img.width + c;         //  img.height =  img.height + c;          //alert(img.width);         //alert(img.height);           // // this.url = 'http://mediotrenderingservice-dev.us-west-2.elasticbeanstalk.com/api/wado?requesttype=wado&studyuid=1&seriesuid=46&objectuid=370&rows=' + this.clientx + '&columns=' + this.clienty;         // this.url = 'http://mediotrenderservice-env.us-west-2.elasticbeanstalk.com/api/wado?requesttype=wado&studyuid=65&seriesuid=46&objectuid=' + this.currentobjectid.tostring() + '&rows=' + rows + '&columns=' + columns;         // // http://mediotrenderservice-env.us-west-2.elasticbeanstalk.com/api/wado?requesttype=wado&studyuid=65&seriesuid=46&objectuid=372&rows=512&columns=512         // console.log(this.url);          // this.http.get(this.url)          //     .map((res: response) => res.json())         //     .subscribe(data => {         //         console.log(data);          //         this.firtsimagetobind = "";         //         this.showimage = true;          //         this.imagevisible = false;         //         // this.firtsimagetobind = 'data:image/png;base64,' + data.dcmimagebuffer;            //         var canvas = <htmlcanvaselement>document.getelementbyid("canvas");          //         canvas.width = 2000;         //         canvas.height = 2000;          //         var context = canvas.getcontext("2d");          //         var img = new image();         //         img.onload = function () {          //             var width = rows;         //             var height = columns;          //             context.drawimage(img, 0, 0, width, height);         //         }         //         //  img.width = 100;         //         //  img.height = 100;         //         this.firtsimagetobind = 'data:image/png;base64,' + data.dcmimagebuffer;          //         img.src = this.firtsimagetobind;           //         console.log(this.firtsimagetobind);          //     }, (err) => console.error(err),         //     () => console.log('done')         //     );       }      // document.addeventlistener('dommousescroll', moveobject,false);        // document.onmousewheel = moveobject;        // function moveobject(event: any) {      //     var delta = 0;      //     if (!event) event = window.event;      //     // normalize delta      //     if (event.wheeldelta) {      //         // ie , opera      //         delta = event.wheeldelta / 60;      //     } else if (event.detail) {      //         // w3c      //         delta = -event.detail / 2;      //     }      //     var currpos = document.getelementbyid('mainimage').offsettop;      //     //calculating next position of object      //     currpos = currpos - (delta * 10);      //     //moving position of object      //     document.getelementbyid('mainimage').style.top = currpos + "px";      //     document.getelementbyid('mainimage').innerhtml //code below     //         = event.wheeldelta + ":" + event.detail;      // }       // $(document).ready(function () {     //     $("#panid").mouseup(function () {      //         // $("#mainimage").focus({ "outline": "none" });     //         $("#mainimage").focus(function () {     //             $("#mainimage").css("outline", "none");     //         });     //     });     //     $("#panid").mousedown(function () {       //         var target = document.getelementbyid('mainimage');      //         var height = target.clientheight;     //         var width = target.clientwidth;      //         height = height + 5;     //         width = width + 5;      //         $("#mainimage").css({ "height": height, "width": width });      //         this.url = 'http://mediotrenderservice-env.us-west-2.elasticbeanstalk.com/api/wado?requesttype=wado&studyuid=65&seriesuid=46&objectuid=' + this.currentobjectid.tostring() + '&rows=' + width + '&columns=' + height;     //         console.log(this.url);      //         //  this.http.get(this.url)      //         //     .map((res: response) => res.json())     //         //     .subscribe(data => {     //         //         console.log(data);      //         //         this.firtsimagetobind = "";     //         //         this.showimage = true;      //         //         this.imagevisible = false;     //         //         this.firtsimagetobind = 'data:image/png;base64,' + data.dcmimagebuffer;       //         //         console.log(this.firtsimagetobind);         //         //     }, (err) => console.error(err),     //         //     () => console.log('done')     //         //     );        //     });     // });   } 

my requirement image zooming (in centralized zooming).

please provide solution