Html5 Canvas Transformation Matrix

I don't understand what the Transformation Matrix is and how to work with it. The following will draw a circle at 0, 0 of my canvas: (generated from an svg converted with svg2canva

Solution 1:

The transformation matrix gets multiplied by each point before it's drawn on the canvas. Like @Eric said, it's an affine transformation matrix from linear algebra. In your example, it would work like this:

[ x']   [ 1 0 -551.23701 ] [ x ]   [ x - 551.23701 ]
[ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ]
[ 1 ]   [ 001       ] [ 1 ]   [       1       ]

So it shifts the x and y coordinates by -551.23... and -368.42... respectively.

Other types of transformations involve different "slots" in the matrix. For example, here's the matrix that scales the drawing by sx and sy (x and y scaling factors):

[ sx  0 0 ][  0 sy 0 ][  0  0 1 ]

and rotation (angle is in radians):

[ cos(angle) -sin(angle) 0 ]
[ sin(angle)  cos(angle) 0 ]
[     001 ]

The advantage of using a transformation matrix over calling individual methods, like translate, scale, and rotate, is that you can perform all the transformations in one step. It gets complicated though when you start combining them in non-trivial ways because you need to multiply the matrices together to get the final result (this is what functions like scale, etc. are doing for you). It's almost always easier to call each function instead of calculating it yourself.

The links @Eric mentioned and the transformation matrix article on Wikipedia go into a lot more detail about how it all works.

Solution 2:

The transformation matrix they are referring to is the common transformation matrix found in linear algebra. Those arguments form the transformation matrix you wish to apply to your coordinates for the given shapes or paths. This page describes the transformation method. Please look specifically at the matrix they define under the method signature for transformation. It shows you which parameters go where in transformation matrix. Now please also refer to the following link. If you scroll down you will see what each element in the transformation matrix means. For instance the [0,0] element (parameter a from the HTML5 transform method signature) of the transformation matrix represents how the coordinate will scale in the X direction. Hope this helps,

Solution 3:

I have implemented a very simple Transformation class to keep track of the Canvas transformation matrix. You can use it to see just how the matrix works and what it is doing. The class will also allow you to keep track of the matrix since the Canvas won't allow you to retrieve the current matrix.

Solution 4:

I found the examples on Apple's page to be helpful in understanding the transformation matrix:

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html