Using clipping paths


show more Using clipping paths 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 ...

Using clipping paths

The HTML5 canvas element gives you the ability to create what are called clipping paths. You can think of a clipping path as basically a mask. It defines a region or a boundary inside of which drawing will take place and outside of which drawing will have no effect. Now initially, the entire canvas is, by default, the current clipping path, which means anywhere you draw on the canvas, as long as it's visible on the screen, those bits are going to show up to the user when you draw. You can create a clipping path using any path, and it's pretty easy. There's just one function to do, so you draw out a path normally, and then you call the clip function, and everything just works.

So imagine we had a photo that looks like this. We applied a clipping path that looks like this. So the white area is where the image will show through, and the black area is where the image will be blocked out. If we were to draw this image on the canvas using that clipping path, it would look something like...

Using clipping paths
Video duration: 4m 46s 3h 7m Intermediate

Viewers:

Using clipping paths 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 ...