iOS端Canvas中globalCompositeOperation视频遮罩失效问题求助

问题现象 #

• 在iOS设备的Safari、Chrome浏览器中，无法通过Canvas实现视频遮罩效果，已在iPad、iPhone及Sauce Labs多款真机测试验证
• 采用带透明通道的PNG作为遮罩，通过globalCompositeOperation实现视频叠加的方案，在安卓、Windows设备上运行正常，但iOS端完全失效：视频直接覆盖遮罩，甚至视频元素的opacity属性在iOS/iPadOS环境下也不起作用
• 当用静态图片替换视频序列时，遮罩功能完全正常；测试多种视频格式、video标签配置均无报错信息

排查过程 #

• 排除框架影响：移除fabric.js依赖，使用原生Canvas API测试，iOS端问题依旧存在
• 排查渲染时序：调整视频加载、Canvas渲染的时机逻辑，未找到有效解决办法
• 查阅苹果官方Bug追踪器，未发现相关公开的问题记录

兼容方案（基于fabric.js） #

感谢@Kaidoo的提示，通过以下步骤实现全浏览器（含iOS）的高性能兼容：

1. 在requestAnimFrame渲染循环外部提前创建FabricImage元素
2. 每次渲染循环内，先将当前视频帧绘制到一个独立的临时Canvas
3. 将临时Canvas设置为FabricImage的数据源，再执行遮罩合成操作

内容的提问来源于stack exchange，提问作者metamagikum