We could redraw the images in the other direction and then load both of them and choose the appropriate image based on the direction, but it's tedious to draw each image twice.
It's easier to have the computer flip them for us as needed.
We do that by adding transformations. A transformation changes the coordinate system that we're drawing into.
For example: origin at top; draw @ 100, 150
or transform to move origin down to 100, 150; draw @ 0,0
are the same thing. this is called translation since we have simply translated (moved) the origin of the coordinate system.
We can also do a scaling transformation.
If we apply a 2x scale transformation then drawing a 10x10 box at 100,150 will appear to draw a 20x20 box at 200,300
Negative scales can be used to flip the image. We need to adjust the origin so that it flips in the correct spot.
Setting the transformation affects all drawing the comes afterward. So we need to set the transform that we want and then restore it to its original.
the canvas context provides functions to save and restore the context, but they are slow because they save the *entire* context font, fillStyle, strokeStyle, transformation and a bunch of other stuff. Since we only need the transform to be saved and restored, we can write our own functions to do this.
GOTO 117 if you already have the Vitality I - Health badge.