canvas not working properly on IoS mobile

Question

Anyone here experience this kind of issue? for some reason, canvas arc() doesn't work on Iphone but works perfectly well on Android. Is there a browser support issue or Am i just missing something?

    width = Math.max(elem.offsetParent.offsetWidth),
    height = Math.max(elem.offsetParent.clientHeight);
var body = document.body, html = document.documentElement,
    docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth),
    docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);


var ct = document.getElementById("cv");
var ctx = ct.getContext('2d');   
ct.width = docWidth; 
ct.height = docHeight;

//ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
ctx.fillStyle = "rgba(234, 70, 195 , 0.7)";
ctx.beginPath();
ctx.arc(width - elem.offsetWidth - 5, docHeight - height + elem.offsetTop + 25, 50, 0, 2 * Math.PI);
ctx.rect(width, 0,-docWidth, docHeight);
ctx.fill();
ctx.stroke();```

Answer 1

Because document.documentElement are not fully supported by Safari IOS. you can check it on Browser compatibility https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement . And I recommend check the width-elem.offsetWidth - 5, docHeight - height + elem.offsetTop ,to make sure these variables are all available.

Do you mean the following effect?

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillStyle = "rgba(234, 70, 195 , 0.7)"; ctx.rect(0, 0,100, 100); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = "white"; ctx.arc(50,50, 40, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); 

 <canvas id="canvas" width="150" height="150"></canvas>