属性较多，可以自由选择
合成属性globalCompositeOperation
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
/* 隐藏滚动条 */
overflow: hidden;
}
canvas {
border: 1px solid #000;
}
</style>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script src="./index.js"></script>
</body>
index.js
var myCanvas = document.getElementById('myCanvas'); // 拿到画布
var ctx = myCanvas.getContext('2d') // 拿到画笔
// 矩形
ctx.beginPath();
// 填充颜色
ctx.fillStyle='red';
// 清除
ctx.fillRect(50,50,200,200);
ctx.closePath();
// 合成属性 【可以改变该属性，获得想要的效果图】
// ctx.globalCompositeOperation = 'destination-out';
ctx.globalCompositeOperation = 'lighter';
// 圆
ctx.beginPath();
// 填充颜色
ctx.fillStyle='blue';
// 清除
ctx.arc(200,200,100,0,Math.PI*2,0);
ctx.fill();
ctx.closePath();