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.

Hi,

Above link is good sample and you can also use two button and add event listener to implement zoom in and zoom out on image to increase and decrease the size of canvas. Although this is not the best way.

// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
    draw(1.2);             
}, false);

document.getElementById("minus").addEventListener("click", function(){
    draw(0.8);
}, false);

and define the function draw()

function draw(scale){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.scale(scale, scale);
    context.drawImage(image, 0 , 0 , canvas.width, canvas.height);
}

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,

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 this third-party library helps you:

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

Hi,just fyi, something similar:

https://developer.tizen.org/forums/web-application-development/how-zoom-image-inside-canvas
https://developer.tizen.org/forums/web-application-development/scale-and-move-image

Alexey.

Hello,

just FYI, there is some more related topics:

https://developer.tizen.org/forums/web-application-development/how-set-size-canvas-according-div-size-tizen?tab=active

https://developer.tizen.org/forums/web-application-development/how-zoom-image-inside-canvas?tab=active

May be this will help you