I'm experiencing a strange behaviour with IOS when trying to print multiple lines of text on a canvas.
In particular, the piece of code is the following (you can ignore the constant "offset"):
// Split the original text by new line character
let lines = text.split(/\r?\n/);
lines.forEach((line, index) => {
const offset = (lines.length === 1) ? 0 : 1.5 * parseInt(size) + (index - lines.length/2) * lineHeight;
drawingContext.fillText(line, 0, offset);
});
For example, given the text:
"a
b
c"
The result of the split operation is, either on Android and IOS:
["a","b","c"]
The result of multiple fillText() calls is correct in desktop (any browser) and Android Chrome, but on IOS it gets printed correctly only the first line, and the following are printed empty.
With remote debugging on IOS device, I verified that the result ot the split operation is correct (I'm getting the right amount of lines, with the right content), so the problem isn't the splitting operation but the fillText() call.
Any ideas?
Thank you.