Canvas合成操作（Composition）是指在绘制过程中使用不同的合成模式将新的绘图操作与已有的图像进行组合。使用合成操作，你可以创建复杂的绘图效果，例如混合（blending）、遮罩（masking）、合并（merging）等。
Canvas提供了globalCompositeOperation属性来设置当前的合成模式。该属性的默认值是source-over，表示新的绘图操作会覆盖已有的图像，但你可以通过设置不同的合成模式来实现不同的效果。以下是一些常用的合成模式示例：
source-over（默认）：新的绘图操作通过覆盖已有的图像来绘制。source-in：新的绘图操作只在已有图像的非透明部分绘制。source-out：新的绘图操作只在已有图像的透明部分绘制。source-atop：新的绘图操作在已有图像的上方绘制，但只在两者重叠的部分绘制。destination-over：新的绘图操作在已有图像的下方绘制。destination-in：新的绘图操作只在已有图像与当前绘图操作的重叠部分绘制。destination-out：新的绘图操作只在已有图像的非重叠部分绘制。destination-atop：新的绘图操作在已有图像的下方绘制，但只在两者重叠的部分绘制。lighter：新的绘图操作与已有图像进行叠加，产生更亮的颜色效果。darker：新的绘图操作与已有图像进行叠加，产生更暗的颜色效果。xor：新的绘图操作与已有图像进行异或运算，产生特定的颜色效果。copy：新的绘图操作完全替换已有的图像。
以下是一个示例代码，展示如何使用合成操作创建复杂的绘图效果：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 200);
// 设置合成模式为source-out
ctx.globalCompositeOperation = 'source-out';
// 绘制一个圆形
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.fill();
// 设置合成模式为destination-over
ctx.globalCompositeOperation = 'destination-over';
// 绘制一个矩形
ctx.fillStyle = 'green';
ctx.fillRect(100, 100, 200, 200);在这个示例中，我们首先绘制一个蓝色的矩形。然后，我们将合成模式设置为source-out，并绘制一个红色的圆形。由于合成模式的设置，红色的圆形只在与矩形重叠的部分绘制，而非重叠部分则是透明的。接下来，我们将合成模式设置为destination-over，并绘制一个绿色的矩形。由于合成模式的设置，绿色的矩形出现在已有图像的下方，但只在两者重叠的部分绘制。最终，这些绘图操作相互叠加，产生了复杂的绘图效果。
通过合理选择合成模式，并结合绘制不同的形状和路径，你可以创造出各种独特的图像效果和视觉效果。请根据具体需求来选择和组合合成操作，以实现你想要的绘图效果。