Page 17: Linear Transformations

Spring 2026 Sample Solution

On the previous page, I said “many useful transformations can be written as linear combinations of the input variables”. Hopefully, you were wondering “which ones”. Now we’ll answer that question!

This is the place where in the past I would have referred you to the textbook where it shows the specific matrices for linear transformations. I do not believe that seeing the equations helps develop the understanding. I am not giving you the textbook chapter here. Previously, I asked students to write out the matrices. Not very useful. Don’t worry, I am not doing that here.

Watching a video about them can help. This is also a good time to watch Affine Transformations in 5 Minutes if you haven’t already. It does a good job of motivating this material in a different way, including what the various elements of the matrix do. We’ll actually do that interactively over the next few pages. But if you see it first, it will be easier to take it in.

But I believe (without evidence, since this is the first time I am trying it) that interactively playing with the matrices will help you understand what they mean. So here are some demos.

Scale

Scale can be implemented as a linear transformation. The matrix is

[s_{x} 0 0 s_{y}]

but here’s a demo so that you can try it out. This demo is showing uniform scale, so that the x and y scales are the same.

Notice how the values of the scale parameter get used to make the matrix.

Most of the time, you don’t need to write this matrix yourself because it is built into the API. In HTML5 Canvas, you can write:

1context.scale(sx,sy);

This command changes the current coordinate system by right multiplying the initial current coordinate system with a scale matrix.

Rotation

Rotation is also represented as a matrix. The method for determining the matrix requires a non-linear computation (using sines and cosines):

[cos θ sin θ - sin θ cos θ]

Notice how all the parameters of the matrix have to change as you change the angle.

Rotations are measured from the X axis towards the Y axis. In the standard HTML5 Canvas coordinate system, angles are given in radians. Like the other transformation commands, rotate updates the current coordinate system by multiplying it on the right.

1context.rotate(theta);

Rotations have many interesting mathematical properties. Here are a few that are useful…

The columns and rows must have length 1.
The rows are orthogonal to each other. The columns are orthogonal to each other.
The determinant is positive; this means that it preserves handedness.
The transpose of the matrix is its inverse.

Shear

Shear is a much less common transformation, but it is still useful. A shear in the X-direction has the matrix.

[10 k 1]

Notice how with a shear, things slide in the X direction.

A shear in the Y direction is similar.

[1 k 01]

Try it.

Shears are not built into HTML5 Canvas. However, because the API allows us to give arbitrary matrices, we can make them ourselves. We will do that in this workbook after we learn how Canvas handles matrices.

Practice

Remembering the equations for matrices is not worth the effort - you can always look them up. However, it can be handy to be able to recognize a matrix. For example, when you are debugging and you expect a certain matrix in your code.

So, see if you can say what this matrix is:

[- 1 0 01]

answer

This is a scale by (-1,1). It is a mirror reflection about the Y axis (of the X direction).

[01 - 1 0]

answer

This is a rotation. It happens to be a rotation by 90 degrees. To figure it out, see what happens to the X and Y axes. You can check that the matrix is orthogonal (the rows/columns are orthogonal) and normal (all rows/columns have length 1).

How about this one? Is this a rotation matrix? What can you say about it?

[.8 .6 - .6 .8]

answer - with a long explanation

Yes. How can we check?

To be sure it really is a rotation, we can check that the rows both have length one, $(.8)^{2} + (- .6)^{2} = .64 + .36 = 1$ . We can check orthogonality: .8 * .6 + (-.6) .8 = 0. We should check for positiveness; we compute the determinant .8.8+(-.6)*.6=1 (which is positive). Another feature is the “anti-symmetry” (the off-diagonal elements are negatives of each other).

Visually, we could apply the matrix to the unit X vector (1,0), and see that it ends up at .8,.6. Since we think this is a rotation, we can see it is rotating the X axis into the first quadrant.

You might notice that this is a 3,4,5 right triangle. We could use the arc cosine of .8 to determine the angle.

How about this one…

[0 - 2 20]

answer - with explanation

Clearly, it is not a rotation - the first row (or first column) has length 2, not length 1. So some scaling is involved.

We can divide everything by two, and see a rotation matrix (by -90). Thus, this matrix is a scale and rotate. It turns out, for scales and rotates, the order doesn’t matter. This is not true for transformations in general.

The Missing Transformation…

If you notice, translation is missing. We’ll discuss that on the next page.