From the course: Learning HTML Canvas
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Clipping paths
- [Instructor] One of the more advanced features of canvas drawing is using clipping paths. You can think of a clipping path as basically a type of mask. It defines a region or boundary inside of which your drawing will take place and outside of which drawing will be clipped. In other words, it 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. Any canvas path can be a clipping path. There's just one function to call to create a clipping path. You draw a path as you normally would and then you call the clip function and that path then becomes the current clipping path. So let's flip over to the editor so we can see what this looks like in action. So I've got my clipping start example open and before we make any changes, let's look at what we already have in the browser. So we'll bring up clipping start…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.