Jump to content

TIL: CSS affects canvas in unexpected way


Recommended Posts

Hey everyone,

this is my first Phaser game I am making, nice to be a part of this community :)! I have used these forums for the last couple of weeks, there are a lot of helpful people here and yet I never posted anything, so I just thought, let's do something back.

Today I just want to share what I learned today and hope this will help other people:

I am currently making a tile editor where I am showing 32x32 sprites on a sidebar. I added a simple graphics object which acted as a border/selection for these tiles which has a 2px width. I noticed that when selecting some tiles the border is not always 2px but rather 1px sometimes either on the top or the bottom. When dragging these sprites, the borders correct themselves every few pixels. This confused me greatly at first... I had disabled antialiasing and I was not scaling.. so what happened was that I was showing a pixellated sprite in the background of the website, using the image-rendering: pixelated; CSS rule on the body of the webpage to ensure all images are pixelated. This caused the canvas to also become pixelated and show my sprites in unexpected ways. Overriding image-rendering for the canvas to  image-rendering: auto; has resolved my issue!

Hopefully this will help other people that will get into a situation like this. Did you ever face any issues like this where CSS has made unexpected changes to your canvas? Any other tips to look out for?

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...