clipping path
The clipping path is similar to ordinary canvas graphics, the difference is that it is used as a mask to hide unnecessary parts. As shown on the right. The five-pointed star with the red edge is the clipping path, and all parts outside the path will not be drawn on the canvas.
If compared with the globalCompositeOperation attribute introduced above, it can achieve similar effects to source-in and source-atop. The most important difference is that the clipping path does not draw anything on the canvas, and it is never affected by new graphics. These characteristics make it quite useful for drawing graphics in a specific area.
In the chapter of drawing graphics, I only introduced the stroke and fill methods, here is the third method clip.
clip()
Converts the path currently under construction to the current clipping path.
We use the clip() method to create a new clipping path.
By default, the canvas has a clipping path that is as big as itself (ie no clipping).
# clip example
For this example, I'll use a circular clipping path to limit the drawing area of the random stars.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');