I made a a particle letter effect for a website using canvas. The way it works is it first generates a small text on a canvas and then reads the image data from that text to turn each pixel into a particle. Below is the relevant javascript
ctx.fillStyle = 'white'
ctx.font = `${45 * resultion}px Courier`;
ctx.fillText('SYOMA',0,30)
const textCoords = ctx.getImageData(0, -15 , 150,45+30)
//Im fairly certian the problem is not with the particle generating fucntion so I did not include it.
The website works fine on Firefox desktop and Chrome Mobile(first image) however runs into issues when loaded on Firefox for android(second image).
Ignore the messed up M on the second picture that is an intended effect when a mouse is hovered above the text.
I suspect the issue is something about Firefox mobile not generating the courier font in canvas for some reason and instead using the default font which is larger leading it to not fit in the image data scan and cutting off the text.
Again I want to mention that this issue happens only on Firefox for mobile and the issue isn’t there for Firefox desktop or any other browser I’ve tested.