Tizen Developers

http://lmgtfy.com/?q=html5+canvas+zoom

Hi,
To change canvas size something like this maybe:

            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
          
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.scale(scale, scale);

            canvas.setAttribute("height", canvas.height*scale);
            canvas.setAttribute("width", canvas.width*scale );

But suggestion in reply above is good too.
Alexey.

Hello,

you can find more information about scale method here: http://www.w3schools.com/tags/canvas_scale.asp . There you can also see an example of how to use this method.

Hope this will help you.

You can use two button and add event listener to implement zoom in and zoom out on image to increase and decrease the size of canvas.

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

and define the function draw()

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

Hello,

The best way as above use scale() canvas function. Or ypu can use some third-party libraries, f.e.

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