Applying a custom transformation


show more Applying a custom transformation provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas show less
please wait ...

Applying a custom transformation

The last transform we're going to take a look at is the custom transform. Now in addition to the transforms that are built into the canvas, you can also define your own. Transforms are defined as a matrix. A matrix has the format that you see here. There are six variables. There is a, b, c, d, e, and f. And to use a transform, a new point is found by applying that transformation matrix to each point in the image that's being transformed. Now, you don't need to panic.

I'm not going to make you learn matrix math, but this does come in handy when you want to apply a transformation that is not built into the canvas. So, for example, canvas gives you transforms for rotation, scaling, and translating, but there are plenty of other transforms out there that you might want to use, and since they are not built in, you would have to use a matrix like this to define one. So we'll see examples of that in a moment, but the way that you apply a custom transform is by using one of the ...

Applying a custom transformation
Video duration: 6m 58s 3h 7m Intermediate

Viewers:

Applying a custom transformation provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...