To make things work, we need to change a little about how we think about points.
Not too much, but
let's just represent a point in two space as [x,y,1].
And no matter what, we want to keep that 1 there.
We will delay the why for just a bit.
If you want some real math theory, you can look into homogeneous coordinates.
Taking care of the upside down canvas.
It would be really nice to have the origin at the bottom of the screen, not the top.
We wouldn't have to "flip" the y coordinate all of the time.
What have we been doing so far?
If you think about it, we really need to subtract the y value from the canvas height.
For (0,0) we have h-0 = h.
For (0,h) we have h-h = 0;
For (0,h/4) we have h-h/4 = 3h/4
So in general if we just subtract the y coordinate from the height, it will draw as if we had an "upside down" canvas.
By the way, this is just a reflection about the line y=h/2
But it would be painful to do this to everything we went to draw.
It turns out that we can use liner algebra to solve our problem.
Just a quick reminder.
A point in 2 space is represented as a triple
(x,y) => [x,y,1]
Remember vector matrix multiplication
$a = \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$
$T = \begin{bmatrix} a & b & c \\ d & e & f \\ g & h & i \end{bmatrix}$
$ T \times a = \begin{bmatrix} a & b & c \\ d & e & f \\ g & h & i \end{bmatrix} \times \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} = \begin{bmatrix} ax + by + c & dx + ey + f & gx + hy + i\end{bmatrix}$
Remember matrix matrix multiplication
$ A \times B \ne B \times A$
So what happens if I multiply a point by the matrix