Drawing a simple logo and randomizing its position, rotation, and scale

The purpose of this recipe is to demonstrate the practical use of transformations by transforming a complex shape. In this case, our complex shape will be a logo, which is just some text with a couple of wavy lines below it. Transformations are exceedingly useful when we want to translate, rotate, or scale complex shapes. It's very common for developers to create functions that draw something complicated at the origin, and then use transforms to move it somewhere on the screen. In this recipe, we'll draw five randomly positioned, rotated, and scaled logos on the screen.

Drawing a simple logo and randomizing its position, rotation, and scale

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.