Why does iOS fail to render html5 canvas drawing after resize?

Question

I have a HTML5 Canvas object, which I resize using Javascript. I then draw on it.

On iOS, the drawing doesn't show unless I delay the drawing with setTimeout.

So this code shows nothing...

myCanvas.width = width;
myContext.strokeStyle = '#000';
myContext.moveTo(0, 0);
myContext.lineTo(2000, 2000);
myContext.stroke();

...but this does:

myCanvas.width = width;

setTimeout(function(){
    myContext.strokeStyle = '#000';
    myContext.moveTo(0, 0);
    myContext.lineTo(2000, 2000);
    myContext.stroke();
}, 100);

Both work fine on desktop browsers, but not in Safari iOS.

What's causing this and is setTimeout the best solution to get around it?

Thanks,

Smells like a race condition to me. I'm not sure why it's happening, but `setTimeout` can't be the best solution. — Adrian Holovaty, Sep 06 '14 at 03:17
Thanks for your comment - I've added an answer, but my diagnosis of the problem was wrong. — Fijjit, Sep 09 '14 at 19:56

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

My mistake. Turns out the setTimeout had nothing to do with it.

What I did discover though that might help others is that there is a maximum size allowed for canvasses in the browsers and this is surprisingly small on mobile browsers (e.g. Safari).

See this question for more info: Maximum size of a <canvas> element

I was trying to render a canvas too large for iPhone.

edited May 23 '17 at 10:28

Community

1
1

answered Sep 09 '14 at 19:56

Fijjit

1,399
2
17
31

Why does iOS fail to render html5 canvas drawing after resize?

1 Answers1