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.