Once I can tell the browser how to draw a flower, my next step is drawing rows of flowers. Since I’m trying to create the illusion of distance, I want my rows of flowers to get smaller as they get closer to the horizon. Typically, this would require a fair amount of math, but it’s easy when I can manipulate the context.
The first thing I do is change the origin of the context to (0, 210). This is my horizon. When I position a flower, I’m positioning it relative to this new origin. Change the scale and see what happens.
Flower position: x-coordinate: , y-coordinate: