HTML5 Canvas is rendering non existing borders on different devices in Chrome

Asked Jul 30 '23 at 14:16

Active Jul 30 '23 at 16:05

Viewed 23 times

iOS Chrome Image Without weird borders, like on desktop chrome.

Android Chrome Based Trusted Web Activity Image With weird borders.

Can some one explain this to me?

Im using drawImage like this on the canvas:

ctx.drawImage(img, position[0], position[1], 64, 64);

It draws a grid of 64x64px tiles.

I heard it might be something with the device pixel ratio but I still don't understand whats happening.

edited Jul 30 '23 at 16:05

asked Jul 30 '23 at 14:16

Robin Michel

That's called antialiasing. Ensure you are drawing on integer coordinates (accounting for any scaling). If you want us to help more, you need to post more of your code. – Kaiido Jul 30 '23 at 15:13
Can't believe it, but you were right. I just put a parseInt around the positions and the borders went away. – Robin Michel Jul 30 '23 at 15:49
Please create a answer that I can mark @Kaiido – Robin Michel Jul 30 '23 at 16:02

0 Answers0