title: Calculate coordinates of a point after zooming in JavaScript
body: <p>I have a requirement to make some annotations on an image. This image is scalable (can be zoomed in and out). Now the challenge is that the annotations should also move with the scaling. How can I achieve this? I understand that 'direction' of zooming depends on the point considered as 'centre' when zooming, so assuming that this 'centre' is the absolute centre of the iamge container (width/2, height/2), how do I get the coordinates of the same point on image after zooming?</p>
  <p>As an example, consider the following two images:</p>
  <p>Image-1 (Normal scale):
  <a href="https://i.stack.imgur.com/ca2h0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ca2h0.jpg" alt="enter image description here" /></a></p>
  <p>Image-2 (Zoomed-in):
  <a href="https://i.stack.imgur.com/NdSkc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NdSkc.jpg" alt="enter image description here" /></a></p>
  <p>If I know the coordinates of the red point in Image-1 (which is at normal scale), how do I get the coordinates (x,y) of the same red point in Image-2? Note that the image container's width and height will remain same throughout the zooming process.</p>