Drawing with patterns


show more Drawing with patterns 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 ...

Drawing with patterns

The HTML5 canvas element makes it easy to draw using patterns. In fact, drawing operations that use fill and stroke styles can take patterns, as well as gradients, as settings. The way you create a pattern is from an image, a video, or another canvas element. So if you use an image that's an animated image, the pattern that you create will use the poster frame of the animated image as the pattern. And if there is no poster frame in the animated image, it will use the first frame of the animation.

For video, the current playback frame is used as the pattern. It's not the live video; it will actually grab a frame and it will use it as the pattern. So at whatever point you create the pattern, then it will choose whatever frame happens to be drawn at that point and use it. Patterns can be set to repeat. They can either repeat not at all, or in both dimensions, or only in X or Y dimensions. So to create a pattern, it's pretty simple; you basically use the createPattern function.

So cre...

Drawing with patterns
Video duration: 7m 20s 3h 7m Intermediate

Viewers:

Drawing with patterns 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 ...