Making a more "Normal" canvas.
 The demo for these notes.
 Like most graphics packages, the HTML canvas allows us to set a current transform matrix.
 reference.

ctx.setTransform(a,b,c,d,e,f);
 This sets the transform matrix to be
$\begin{bmatrix} a & c & e \\
b & d & f \\
0 & 0 & 1
\end{bmatrix}
$
 By default the value is the identity matrix (Why?)

ctx.transform(a,b,c,d,e,f)
multiplies the current transfomration matrix by the given matrix.
 Any time anything is drawn, it is first multiplied by this matrix.
 We will look at this in more depth later.
 Right now what I would like to do is
 Put (0,0) in the center. (T)
 Flip the canvas over. (F)
 Translate so that 0,0 is in the center is easy
$T = \begin{bmatrix} 1 & 0 & \frac{\text{width}}{2} \\
0 & 1 & \frac{\text{height}}{2} \\
0 & 0 & 1
\end{bmatrix}$
 Flipping is not a problem. This is just reflect about the y axis.
 Or scale about y by 1

$ F = \begin{bmatrix} 1 & 0 & 0\\
0 & 1 & 0\\
0 & 0 & 1
\end{bmatrix}$
 If I did my math right
$ TF = \begin{bmatrix} 1 & 0 & \frac{\text{width}}{2}\\
0 & 1 & \frac{\text{height}}{2}\\
0 & 0 & 1
\end{bmatrix}$
 In the demo I took advantage of javascript treating functions as objects.