Jump to content

[SOLVED] A rendering problem: text looks sharp but overly pixelated in high-resolution & small-window-size environment (namely, mobile)


Recommended Posts


Sorry guys for wasting your time I'm really dumb, misunderstand the basic concepts about css. Now I turn on the autoDensity option and edit the resize function, everything renders correctly :)

BTW, I noticed that even if I turn on the autoDensity, whenever I want to render some texts with resolution greater than devicePixelRatio, the pixelation "problem" still exists. I guess this behavior works as intended and it's not a "problem"?


This is my original post:

Sorry for the title because I'm not 100% sure what causes this problem, but I believe it should have something to do with resolution (devicePixelRatio) and the logical size (or viewport size / window.innerSize whatever).

I started developing web game using Pixi.js recently and didn't notice the importance of resolution until I tested on the mobile.

At first, the default resolution is 1 and the text looked a bit blurry. So I set PIXI.settings.RESOLUTION = window.devicePixelRatio; Now here comes the problem: the text looks sharp, but overly pixelated like the following screenshot: (And obviously I have already turned on the antialias)


After some inspection I believe that this problem happens when the resolution is high and the window size is small. For example my phone has devicePixelRatio = 3, and the typical window.innerWidth and window.innerHeight is like 350x700.

If I open the webpage with a small window and set the resolution to a very high number on desktop, it produces similar result:


To provide with more information, maybe there's something wrong about my css styling and resize function as well.

It's very simple vue.js app with a <div id="app"> and <canvas> is inside that.

body {
  margin: 0px;

body {
  background-color: #2f98d5;

#app {

#game-canvas {
  display: block;

This is the resize function. Basically, I design the layout with a desired width and height (like 1280x720), then scale the renderer and stage based on that.

    resizeAppFn = (contentWidth: number, contentHeight: number) => {
        let resizedWidth = contentWidth / this.renderer.resolution;
        let resizedHeight = contentHeight / this.renderer.resolution;
        if (contentWidth * this.desiredRatio <= contentHeight) {
            // fit width
            resizedHeight = resizedWidth * this.desiredRatio;
        else {
            // fit height
            resizedWidth = resizedHeight / this.desiredRatio;
        this.renderer.resize(resizedWidth, resizedHeight);
        this.stage.scale.set(resizedWidth / this.desiredWidth, resizedHeight / this.desiredHeight);


Edited by MGTHZ
Link to comment
Share on other sites

  • MGTHZ changed the title to [SOLVED] A rendering problem: text looks sharp but overly pixelated in high-resolution & small-window-size environment (namely, mobile)

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