I am not sure about the title of this question.
I have multiple images in one canvas. The first image is a background. The other images is in a dynamic position by the background image.
I want to resize the canvas (e.g. from $500\times500$ to $300\times300$; $500\times500$ is default size of the background image). My problem is that I have different images, size and position. So if I changed the size and position of the canvas, the other images would change size and position too so they are proportional one to each other for the position and keep the ratio.
Does anyone know how to calculate it?
Thanks!
This is a bad place for your question, so I have down-voted it (sorry).
Let the width and height of the canvas be $\left(w,h\right)$. Let the image inside the canvas be defined by the two corners $\left(x_{1},y_{1}\right)$ and $\left(x_{2},y_{2}\right)$:
What I imagine you would like to do is scale the canvas by $s$ (in this case, $s=300/500=3/5$). What you get are the new (scaled) points $$ \left(w,h\right)\mapsto\left(sw,sh\right), $$ $$ \left(x_{1},y_{1}\right)\mapsto\left(sx_{1},sy_{1}\right), $$ and $$ \left(x_{2},y_{2}\right)\mapsto\left(sx_{2},sy_{2}\right). $$ For example, if $\left(w,h\right)=\left(500,500\right)$, $\left(x_{1},y_{1}\right)=\left(100,100\right)$, $\left(x_{2},y_{2}\right)=\left(200,200\right)$, and $s=3/5$, you end up with $\left(w,h\right)=\left(300,300\right)$, $\left(x_{1},y_{1}\right)=\left(60,60\right)$, $\left(x_{2},y_{2}\right)=\left(120,120\right)$.