const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.beginPath();
// 两个弧形都按逆时针绘制
ctx.arc(0, 0, 50, 0, Math.PI, true);
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
// 使用奇偶环绕规则
// ctx.fill('evenodd');
ctx.fill();
ctx.restore();
<canvas id="canvas"></canvas>