The clip provided by HTML5 canvas can set the currently created path as the current clipping path method.

Cut after drawing path

Cutting method:

//Convert the created path to a clipping path
context.clip();

context.clip(fillRule);

context.clip(path, fillRule);

/ / parameter:
// fillRule: this algorithm determines whether a point is in the path or out of the path.
// optional values:
// "nonzero": non-zero surround principle, default principle.
// "evenodd": the principle of even and odd surround.
// path: path2d path to be cut.

Example:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,20,20,160,160);
}

ctx.beginPath();
ctx.arc(100,100, 80, 0, Math.PI * 2);
ctx.clip();

Use the path provided by the Path2D object to crop

Path2d allows us to create paths in canvas that we can keep and reuse.

The above example can be rewritten as:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,20,20,160,160);
}

var path = new Path2D();
path.arc(100,100, 80, 0, Math.PI * 2);
ctx.clip(path);