Jump to content

Fuzzy canvas due to devicePixelRatio not taken into account


Recommended Posts

Hey fellow Pixies,
I have blurring issues with my Pixi stuff. At first I thought that this was somehow a Pixi issue (core issue, or me using it wrong).
Then I found out this is a general issue with canvas and devicePixelRatio.


I made a small repro myself:


It shows:
1./ The raw button img tags as shown and scaled by the "normal browser renderengine".
2./ A Pixi playground with the native and retina versions of the image (both blurry).
3./ A normal canvas render (also blurry)
4./ A normal canvas render with the CSS scale method used (sharp)

I'm considering rolling my own Pixi modification for this. But I prefer not too, since my understanding of Pixi and gfx stuff limits me to brute hacks.
Does anyone know if a solution for this is already available somewhere, or perhaps it is already possible with Pixi in some way that I just haven't spotted yet?

I found this post that describes the same issue:


As the asker also found renderer.context.setTransform(ratio, 0, 0, ratio, 0 ,0); does not seem to make any difference. If I use "resolution: ratio" when initializing the renderer, everything becomes bigger (so that would need to be combined with the CSS-scaling I guess).

Best regards
Torben Rohde

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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