Using clipping paths
Video: Using clipping pathsThe 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.
Viewers: in countries Watching now:
One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation.
- Understanding the differences between Canvas and SVG Graphics
- Drawing shapes
- Drawing arcs and paths
- Rendering text
- Using clipping paths
- Drawing images and video
- Transforming objects with the translate tag
- Manipulating raw pixels
- Applying a custom transformation
- Creating an animation or slideshow control with Canvas
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 this. So, only the part of the image that's shown through the open area would actually be drawn onto the canvas. Now to do this, you use the clip function. The clip function creates a new clipping region by calculating how the current clipping region intersects with the area that's defined by the current path.
And then the new clipping region simply replaces the current clipping region, because each context can only have one current clipping region. Now, to do this in code, it looks something like this. Here is a canvas, and imagine you have some code that looks like this. So we define a path, and then we make an arc, and then we call stroke. That usually gives us a circle that looks like this. If we now go ahead and call the clip function on the canvas context, now drawing will only take place inside of that arc. So let's take a look at this in code.
So here I am in the editor, and I've got my snippets opened to my clipping paths region. I'm going to go ahead and open up my clipping_start example. So here's what we're going to do. First, let's go to the snippets, and let's copy the first few lines over. We'll copy that one, and we'll paste it in. Then we'll scroll down a little bit, and we'll get the drawImage call. We'll copy that, and we'll paste that in. So let's save, and let's see how this looks in the browser.
So I'm going to bring up clipping_start in the browser. So you can see that the current clipping region right now is the entire canvas; nothing is being blocked out. So the entire image is filling the canvas. So let's go back to the code and that image, by the way, is down here in the document. So I'm just getting the image and drawing it onto the canvas. We've seen this already; nothing new here. Let's go back to the snippets and let's try creating a clipping path. Let's start by making a circular clipping path. This is what I just showed in the slides.
So I'm going to paste that in, and I'm going to uncomment these two lines. So before we run the code, let me point it out. So this code is going to draw an arc at the center of the canvas. So we divide the Width by 2, divide the Height by 2. That gives the middle of the canvas. It's got a radius of 150 pixels, and it's a full and complete circle. So that gives us a full circle in the middle of the canvas, and then this function call right here is the important one. That creates a clipping region out of the current path. So let's go ahead and do that.
We'll save, and we're going to refresh. And you can see that the results of that, we have a circle in the middle of the canvas, and only the part where the circle is is where the image is being drawn; the image is being masked out on either side. So that's a pretty simple, easy example, but let's make it a little bit more complex. So let me go back to the code, and let's go and comment these two lines out again. Let's go back to the snippets. Now, let's create an arbitrary clipping path.
So using what we already know and have learned about creating paths can be applied to clipping paths. So here, we have a call to beginpath, we have a series of lines, then we close the path, and then we call clip. So this is going to create a clipping path out of just some arbitrary path that I've made with a few line segments. There's going to be four line segments: one, two, three, and then closePath will make the final one. So let's save, and let's click the Refresh button. You can see that now the clipping region has been changed to the four points that I've created using a path.
So I took an ordinary path, didn't stroke it--although I could if I wanted to-- and I made a clipping region out of it. Let's see if it works in other browsers. So let's go ahead and open this in say Firefox. You can see, the result are the same. So in this example, we saw how to take ordinary paths and create clipping regions, which are masks, through which drawing can take place and outside of which drawing is prevented.
There are currently no FAQs about HTML5: Graphics and Animation with Canvas.