Canvas zoom in and zoom out and panning

[BraVe]

Hey pals this is my first post here, can someone explains to me how to zoom in and out in canvas with vanilla javascript? I have found somethings https://codepen.io/techslides/pen/zowLd but i don't understand the logic behind it. Thank you

[grelf]

I assume we are taking about the standard '2d' graphics context for the canvas. There two simple approaches.

1. Create your scene as an image larger than the canvas. When you use context.drawImage (x, y) the x and y values (the coordinates for placing the top left corner of the image) can be negative. The context has a clipping region which by default is the whole area of the canvas. When you try to draw something which lies partly outside the canvas only the part within the cipping region will really be drawn, and seen. drawImage has some optional parameters, so context.drawImage (x, y, w, h) also scales the image as it draws so that the full width of the image is scaled up or down to w and the height to h. So panning can be achieved by varying x and zooming can be achieved with w and h. I have found the process to be extremely efficient - far better than could be achieved by processing the image pixel by pixel.

2. When you construct a scene place objects relative to an origin and with a scale factor, both of which you can vary. Use context.drawImage (x, y, w, h) again for each object. You can then vary the origin and scale factor as required.

You can see an example of mine which mainly uses the second technique at https://myforest.uk - switch from the initial map to the scene and you will see lots of photographic images are drawn in each scene  (saved as PNG files with transparency). If you turn you will see that objects move because the observer's viewing position has changed. I set things so that an object 5 metres away from the observer is drawn full scale but at any other distance d the scale factor is f = 5 / d. Then those final parameters are w = image.width * f and h = image.height * f. There is more description of my techniques at https://www.grelf.net/forestdesign.html - I want to encourage others to use the wonderful creative medium of HTML5/JavaScript.

I hope this helps.

[BraVe]

9 hours ago, grelf said:

I assume we are taking about the standard '2d' graphics context for the canvas. There two simple approaches.

1. Create your scene as an image larger than the canvas. When you use context.drawImage (x, y) the x and y values (the coordinates for placing the top left corner of the image) can be negative. The context has a clipping region which by default is the whole area of the canvas. When you try to draw something which lies partly outside the canvas only the part within the cipping region will really be drawn, and seen. drawImage has some optional parameters, so context.drawImage (x, y, w, h) also scales the image as it draws so that the full width of the image is scaled up or down to w and the height to h. So panning can be achieved by varying x and zooming can be achieved with w and h. I have found the process to be extremely efficient - far better than could be achieved by processing the image pixel by pixel.

2. When you construct a scene place objects relative to an origin and with a scale factor, both of which you can vary. Use context.drawImage (x, y, w, h) again for each object. You can then vary the origin and scale factor as required.

You can see an example of mine which mainly uses the second technique at https://myforest.uk - switch from the initial map to the scene and you will see lots of photographic images are drawn in each scene  (saved as PNG files with transparency). If you turn you will see that objects move because the observer's viewing position has changed. I set things so that an object 5 metres away from the observer is drawn full scale but at any other distance d the scale factor is f = 5 / d. Then those final parameters are w = image.width * f and h = image.height * f. There is more description of my techniques at https://www.grelf.net/forestdesign.html - I want to encourage others to use the wonderful creative medium of HTML5/JavaScript.

I hope this helps. 

Thank you for your answer i will take a look