Custom transformations

- [Narrator] The last transform type we're going…to take a look at is the custom transform.…In addition to the transforms that are built into…the canvas such as scale and translate,…you can also define your own.…These custom transforms are defined as a matrix…of values and it has the format that you see here.…This transform matrix is then applied to drawing…operations on the canvas.…Now, you don't need to panic here.…I'm not going to make you learn matrix math,…but this feature does come in handy when you want to…apply a transformation that is not built into…the canvas.…

So, we'll some examples of how to do that in a moment,…but the way that you apply a custom transform is by…using one of the two transform functions.…The first one is simply called transform and it…takes these six arguments which correspond to…the variables you see in the matrix.…The transform function takes the transform you're…defining and adds it to whatever the transform…of the canvas currently is because,…remember,…transforms are additive.…

Resume Transcript Auto-Scroll

Author

Released

11/26/2018

JavaScript developers can create freeform graphics on a drawing surface known as the Canvas. The Canvas unlocks the ability to create rich, native web applications with 2D and 3D graphics. In this course, instructor Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a webpage. Learn how to draw basic and complex shapes, adjust colors and styles, and add shadows, patterns, and gradients. Then explore more advanced techniques such as scaling, rotating, and compositing objects. Plus, discover how to use Canvas elements to build a full-featured slideshow and a double-buffered animation.