SVG Clip Path on Canvas breaks on phone-CodePudding

I set up an SVG clip-path on a canvas. Drawing in the canvas works in Firefox, Edge and Chrome on my computer, but on my iPhone the canvas just disappears in Firefox and Safari.

document.getElementById('can').onclick = function(evt) {
  evt.target.getContext('2d').fillRect(125, 50, 50, 50);
};

canvas {
  background: #0f0;
  clip-path: url(#diamond);
}

<p>Click in canvas to draw black square.</p>
<canvas id='can' width='300' height='150'></canvas>
<svg width='0' height='0'>
  <clipPath id='diamond' clipPathUnits="objectBoundingBox">
    <path d="M0,0.5 0.5,0 1,0.5 0.5,1 Z" />
  </clipPath>
</svg>

CodePudding user response：

Apparently a bug, you should report.

As a workaround you could apply the clip-path to a wrapper/parent element:
(Tested on iOS safari)

document.getElementById('can').onclick = function(evt) {
  evt.target.getContext('2d').fillRect(125, 50, 50, 50);
};

.canvasWrp {
  width: 300px;
  height: 150px;
  background: #0f0;
  clip-path: url(#diamond);
}

<p>Click in canvas to draw black square.</p>
<div >
  <canvas id='can' width='300' height='150'></canvas>
</div>
<svg width='0' height='0'>
  <clipPath id='diamond' clipPathUnits="objectBoundingBox">
    <path d="M0,0.5 0.5,0 1,0.5 0.5,1 Z" />
  </clipPath>
</svg>