Tizen Developers

Hello,

I recommend you refer the following url. You can see the source code at the page.

ex) http://phrogz.net/tmp/canvas_zoom_to_cursor.html

var zoom = function(clicks){
   var pt = ctx.transformedPoint(lastX,lastY);
   ctx.translate(pt.x,pt.y);
   var factor = Math.pow(scaleFactor,clicks);
   ctx.scale(factor,factor);
   ctx.translate(-pt.x,-pt.y);
}

They are using the scale() method. If you want to see the example of the "scale", please refer the following page.

http://www.w3schools.com/tags/canvas_scale.asp

Thanks.

Hello,

use scale() method to zoom in and zoom out canvas. Here you can find more information about this:  http://www.w3schools.com/tags/canvas_scale.asp you can also find there an example of how to use this method.
Also, I suggest you to visit similar topics: https://developer.tizen.org/forums/web-application-development/zoom-canvas?tab=active and https://developer.tizen.org/forums/web-application-development/how-resize-canvas-using-javascript.?tab=active

Hope this will help you.

Hello,

May be tese ways helps you:

http://bl.ocks.org/mbostock/3680958

http://blog.akademy.co.uk/2010/06/canvaszoom-html5-canvas-and-code/

http://codepen.io/techslides/pen/zowLd

<!-- ==========Zoomin and zoomout============== -->
 <script src="js/img-touch-canvas.js"></script>
    <script>
    
    var ppp=sessionStorage.getItem("session");
    var gesturableImg = new ImgTouchCanvas({
        //alert("hi");
        canvas: document.getElementById('can1'),
        path: ppp
        //alert(ppp);
    });
    
    </script>