Sign in to follow this  
BraVe

Canvas zoom in and zoom out and panning

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.