Jump to content

Setting canvas pixelRatio


Recommended Posts


I was just trying to set devicePixelRatio for PIXI but when I resize the canvas, all sprites get offset to bottom left. I googled but didn't find any proper approach to set resolution and resize canvas.

In following demo you will see, extra space gets added at the top of the canvas. Am I suppose to change something else?


Link to comment
Share on other sites

Pass the resolution to options, dont set it after creation. There's no magic setter of resolution that changes current framebuffer properties and passes that resolution everywhere.

var app = new PIXI.Application(500, 500,{
  view: document.getElementById('c') , resolution: 2, autoResize: true

When you work with resolution, you have to be aware of several things.

1. differences between "app.screen.width" and "app.view.width".

2. What is "autoResize" , and how can it be done manually if you prefere to do your CSS. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L225

3. filters in pixi-v4 work with PIXI.settings.FILTER_RESOLUTION . Each time you create a filter, it takes resolution param from settings. Either set it in settings before creation of filters, either set it manually for all filters.

4. If you really want to change resolution after renderer creation - look in sources where it goes. _activeRenderTarget has to be changed too.

5. @2x textures. Look how texturepacker or whatever tools you use export better resolution images.

If you do everything the right way, your screen will show the same thing with resolution:2 as with resolution:1, no need to scale the stage.

Please don't treat pixi as a black box. PixiJS Application class is the base that you have to clone and do on your own.

You also have to be aware of WebGLRenderer/SystemRenderer internals if you encounter any global problem, like this resolution trick.

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