SVG Clip Path on Canvas breaks on phone

Question

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>

This might be related to [this](https://stackoverflow.com/a/43482153/5289334) and [this](https://stackoverflow.com/questions/52532614/total-canvas-memory-use-exceeds-the-maximum-limit-safari-12) — c0m1t, Aug 08 '22 at 11:47

score 1 · Accepted Answer · answered Aug 08 '22 at 18:58

1

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 class="canvasWrp">
  <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>

answered Aug 08 '22 at 18:58

herrstrietzel

11,541
2
12
34

I sent a bug report to Apple (Safari) and Mozilla (Firefox). Good workaround. – Jostein Trondal Aug 08 '22 at 20:14
@Jostein Trondal: pardon me I missed this point: any browser on iOS actually runs on safari webkit's rendering engine (most likely, you'll encounter the same issues in chrome/ium iOs). So you can rather concentrate on annoying the developers at apple's safari division ;) – herrstrietzel Aug 08 '22 at 22:41
Yes, the good folks at Mozilla also pointed this out to me. It will be interesting to see if I get a reply from Apple. – Jostein Trondal Aug 09 '22 at 10:01

SVG Clip Path on Canvas breaks on phone

1 Answers1