Jump to content

Blurry objects on scaling


Recommended Posts

Hello, everyone.


I’m developing online spreadsheet editor (like Google Sheets) and I’m using PixiJS to draw the document (cells, texts and etc).

I face with a problem with blurry objects while page scaling. I read a lot of information about it and created my own scaling mechanism, which recalculates object size and updates it.

But user can change browser scale via settings or can change display scale in OS settings. I can do nothing with it and user gets blurry objects.

For example, https://prnt.sc/vekptq - 100%, https://prnt.sc/vekr09 - 125%.

I tried to change PIXI resolution on scaling or calculate ratio of renderer.view.width without scale and after scale and set it as CSS  zoom or transform: scale for Canvas. But it doesn’t help.

As I know PIXI handle scaling by applying the scale to the post-rendered object.

If I understand correctly then BitmapText or SDF is best way to fix this problem for text, but I need to allow users can change text style. In this case I need prepare and load a lot of fonts. And that doesn't solve the problem with other blurry objects.



Is there some way to generate BitmapText form Text with style?

Or maybe other way to fix blurry objects, such as disabling PIXI scaling, for example?

Link to comment
Share on other sites

1. pass "wnidow.devicePixelRatio" as "resolution" to application/renderer constructor

2. add "autoResize:true" in those params so CSS props are set ther

3. PIXI.settings.RESOLUTION needs to be set if you want Filters to obey this setting to

also , there's "roundPixels" setting for texts

The issue about "resolution" is that no one actually does everything right on first try. If you dont get it, you have to actually look in source code and understand what pixi is doing with those things - that's the only guarantee. Its easy, you can find other explanations on this subforum or in pixijs github issues.

Link to comment
Share on other sites

1 hour ago, Kirill.Afonin said:


Thanks a lot, i realized my mistake. Now there is on blur while scaling.

One of the problems was that I am using GWT and working with PIXI through GWT-JSNI. For some reason, through JSNI, pixi application and renderer were created with wrong parameters.

Yes, object params for those functions are a problem when you try to port PixiJS or just use it through interface like JSNI. If only there was a Builder template in JS like it exists in Kotlin or Scala.

Link to comment
Share on other sites

Firstly I used this wrapper.

But it was made for Pixi 3 and I'm using Pixi 5.

Now I'm making my own version of the wrapper. Now it contains only those PIXI mechanisms that I use in my project. It’s located at the private repository of the company I work for.

If necessary, I can transfer it to the public repository and provide a link to it.

Link to comment
Share on other sites

What a timely thread, I've got a similar issue...

I'm making a simple test so a I have a 4x5 square made of single pixel sprites, all set at random alpha values.

These are in a container which I'm scaling up so I can view, but this seems to blur the 'pixels'


I've made what I thought were the appropriate settings

PIXI.settings.ROUND_PIXELS = false;
PIXI.settings.RESOLUTION = 1;
window.devicePixelRatio = 1;

But, the results aren't what I expected...

Is there a way to do this?

Edited by charlie_says
Link to comment
Share on other sites

Hi @ivan.popelyshev I made a quick pen for this and (probably no surprise to you) this worked exactly as expected...

I'll need to look at what's going on in my set up, although there's nothing very complicated just a few nested containers.

edit -----

I've now got this working correctly in my project - but some of my tests still display the blurry version, I need to investigate what the difference is.

Edited by charlie_says
Link to comment
Share on other sites

  • 2 weeks later...


I faced with the task of debugging the display on Canvas. For me, this task is new, I don't quite understand what should I begin with.

Can anyone recommend approaches for this task and tools?

From what I found, this is a comparison of screenshots, maybe are there alternative ways?

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...