Strange HTML Canvas rendering problem on iOS 14 - as seen on iPhone 8

Question

I have a strange rendering problem on a simple donut chart "hand made" with HTML Canvas. It started from iOS14 and I can see it on my iPhone 8.

I don't know if any other device has this problem, from chrome dev tools and from iPhone 11 Pro simulator I didn't.

https://codepen.io/emish89/pen/bGemWKN

const value = 50;
const circle = document.getElementById("victories-canvas"),
  context = circle.getContext("2d"),
  positionX = circle.width / 2,
  positionY = circle.height / 2,
  degrees = value * 3.6,
  circleRadius = 80,
  innerCircleRadius = 65,
  startAngle = (Math.PI / 180) * 270,
  endAngle = (Math.PI / 180) * (270 + degrees);

context.lineCap = "butt";
context.beginPath();
context.strokeStyle = "#000";
context.lineWidth = "15";
context.arc(positionX, positionY, circleRadius, startAngle, endAngle);
context.stroke();

context.beginPath();
context.arc(positionX, positionY, innerCircleRadius, 0, 2 * Math.PI);
context.fillStyle = "#D8FF53";
context.fill();

<canvas id='victories-canvas' width='175' height='175' />

I attach a pen where I created the situation with the problem. If the value (first line in JS) is higher than 75 you start to see strange glitches. (images below)

I tested it and seems related to the circleRadius property, under 78 you don't have the problem in my particular case.

I don't know if is something wrong in my code that I don't understand (but it worked fine for years) or something else.

Thanks a lot for all the contributions.

Answer 1

The same problem. ctx.arc may case this bug.

demo here: https://codepen.io/acery/pen/XWjdmbv