IOS 16：Polyline drawing problem using canvas

Question

Created Sep ’22

Replies 3

Boosts 1

Views 1k

Participants 4

We have encountered a problem when using canvas to draw polylines with IOS 16. There are two polylines with different colors. If the first one has only two vertices and they are rendered more than once, the color of the second line would become the same as the first one. Here is the demo.

<canvas width='200' height='200'></canvas>
<script>
const canvas=document.querySelector('canvas');
const context=canvas.getContext('2d');
function render(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth=10;
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(200,0);
    context.strokeStyle='#aaaaaa';
    context.stroke();
    context.beginPath();
    context.moveTo(200,200);
    context.lineTo(200,0);    
    context.strokeStyle='#00ff00';
    context.stroke();
}
render();
render();
</script>

Here is some screenshots about this problem:

IOS 15.7:

截屏2022-09-30 下午5.49.27.png

IOS 16.0:

截屏2022-09-30 下午5.55.46.png

Does IOS 16 have any optimization strategies for this situation that would cause this problem?

Boost

Answer 1

Claude31 OP

Sep ’22

For my understanding, why do you call render() twice in the script ? For testing ? Does everything work ok if either:

single call
1s sleep between the 2

Which browser ? Safari ?

This could have to do with how the run loop works, but I've not read of change in iOS 16 for that.

Could you try to set the strokeStyle before lineTo and see if that makes a difference ?

That's how it is done in the reference here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath

Could you also split render in 2 func, render1() and render2() for each line, just to check ?

Could you also test:

function render(case: Int){
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth=10;
    context.beginPath();
    context.moveTo(0, case == 1 ? 0 : 20);
    context.lineTo(200, case == 1 ? 0 : 20);
    context.strokeStyle='#aaaaaa';
    context.stroke();
    context.beginPath();
    context.moveTo(case == 1 ? 200 : 220, 200);
    context.lineTo(case == 1 ? 200 : 220, 0);    
    context.strokeStyle='#00ff00';
    context.stroke();
}
render(case: 1);
render(case: 2);

0

Answer 2

stsyn OP

Oct ’22

context.closePath() before context.stroke() fixes bug. If you for some reason cannot close path, beginning and immediately closing new path is fine too.

Also seems like styling options should be after context.beginPath() if possible

1

Answer 3

Skannan OP

Dec ’22

Hi,

I have a similar but not the same problem. We have a canvas on our app, where you can draw signature, when we select blue color and finish drawing the signature, color automatically changes to grey on the canvas. It is only happening on iOS 16 and only on Safari/chrome. Any help/idea what could be going wrong? Something to note: the signature can be drawn on the canvas only in potrait mode.

0