Javascript globalAlpha无法在Safari上使用GlobalComposite操作

我正在尝试渲染两个矩形，一个位于另一个内部画布元素的顶部，globalCompositeOperation设置为“源输出”，而globalAlpha设置为0.2。但是，globalAlpha在使用“不透明度1”进行渲染时，无法处理Safari和外部矩形

下面是代码

const el=document.getElementById（'canvas'）；
const ctx=el.getContext（'2d'）；
ctx.globalCompositeOperation='source out'；
ctx.beginPath（）；
ctx.rect（200400400）；
ctx.closePath（）；
ctx.fill（）；
ctx.globalAlpha=0.2；
ctx.beginPath（）；
ctx.rect（0,0800）；
ctx.closePath（）；
ctx.fill（）
正文{
背景色：白色；
保证金：0；
}
.帆布容器{
位置：相对位置；
宽度：75%；
身高：0；
保证金：自动；
边缘顶部：50px；
垫底：75%；
}
.画布容器.画布{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

这是画布容器
我完全可以重现这个bug，作为一个bug，唯一真正的解决方法就是希望它得到修复

现在，有很多变通方法可用

第一种是使用半透明的
fillStyle
，而不是
globalAlpha
：


const el=document.getElementById（'canvas'）；
const ctx=el.getContext（'2d'）；
ctx.beginPath（）；
ctx.rect（100100200200）；
ctx.fill（）；
ctx.globalCompositeOperation='source out'；
ctx.fillStyle=“rgba（0,0,0,0.2）”；
ctx.beginPath（）；
ctx.rect（0,0400）；
ctx.fill（）
canvas{border:1px solid；}