为什么复杂的HTML画布剪切路径在Android浏览器中不起作用？

我有一个用于给蝴蝶着色的儿童web应用程序，它使用一个剪切路径来设置绘画区域的边界

该应用程序在桌面浏览器、Opera Mobile和iOS设备上运行良好，但Android默认浏览器似乎将剪辑区域视为空，从而阻止任何后续画布操作生效

您可以在此处找到源代码：

然而，主要行动是：

context.beginPath();
(lots of context.bezierCurveTo statements to draw a butterfly shape)
context.closePath(); 
context.stroke();
context.fillStyle = "rgb(255,255,255)";
context.fill();  
context.clip(); 

我尝试过改变顺序，例如在尝试笔划或填充形状之前剪切，但在Android上，它实际上没有绘制任何东西——同样，它将剪切路径视为空

---

有什么想法吗？是我，还是Android webview中对剪辑路径存在未记录的限制？

这在Android浏览器上仍然不起作用，但在Android的Google Chrome上起作用

以下是一个测试页面，您可以使用该页面查看：

---

我怀疑在不久的将来，常规的android浏览器将被弃用，取而代之的是Google Chrome。我不会因为这个问题而屏住呼吸。这在android浏览器上仍然不起作用，但在Google Chrome for android上起作用

以下是一个测试页面，您可以使用该页面查看：

---

我怀疑在不久的将来，常规的android浏览器将被弃用，取而代之的是Google Chrome。我不会因此而屏息以待。安卓系统的实现通常都是垃圾，所以如果你遇到这样的错误，我也不会感到惊讶。我在安卓系统跟踪器上为此添加了一个问题——相当多的画布演示在安卓浏览器上无法正常工作：安卓系统的实现通常都是垃圾，因此，如果你遇到这样的bug，我也不会感到惊讶。我在Android tracker中为此添加了一个问题-相当多的画布演示无法在Android浏览器上正常工作：