Nsryjdtyk

given the url(image) below as an example
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_220,y_140/yellow_tulip.jpg

From what I understand, the first image yellow_tulip is drawn on (0, 0) which is the top left corner. The second image brown_sheep draws from (220, 140), which is the right bottom corner of yellow_tulip because (0, 0) starts from top left of canvas.

Everything makes sense from what I understand til the third image kicks in. horses also starts from (220, 140) but how come it starts from the center of second image brown_sheep? I'm really confused.

The dimensions of the image changes when you apply the overlay changes so that should be taken into consideration when applying the x and y coordinates.

The coordinates are calculated from the center of the image but since the size of the canvas in the first image is 220 by 140, setting the brown sheep overlay's coordinates to 220 by 140 will double the size of the canvas to 440 by 280.

Meaning the following URL is now 440 by 280 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill/yellow_tulip.jpg

To now overlay the horsed over the brown sheep you will need to recalculate the dimensions to the following- https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_110,y_70/yellow_tulip.jpg

Or
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_330,y_210/yellow_tulip.jpg