First of all, we should create a clipping path. Canvas path is a series of points connected by lines or curves dependent on the drawing instructions. We start the path using the method beginPath and set its first point using the method moveTo. Then we construct multiple subpaths using the lineTo, arcTo, quadraticCurveTo and bezierCurveTo methods, while the ending point of each new subpath becomes the new context point. Finally we use the closePath method to return to the starting point and so make out path closed. Rather than drawing the path point by point, we can also use the whole shape drawing methods rect and arc. When the path is ready, we can fill it, stroke it, or use it as a clipping region.
The clipping in HTML5 canvas is simple and straightforward. Since we use the clip method, all future drawing will be limited to the clipping region. So, if we draw the image after the clip method then only the part of the image inside the path will be actually drawn and the rest of the canvas area will stay unchanged.
Let’s draw the below picture (I took it in the Schonbrunn Gardens, Vienna; just an amazing place!) into the canvas that we’ll clip with a smaller rectangle at the center.