I am having some issues getting pixi.js 2.+ to work with retina displays.

scale = window.devicePixelRatio
width = 960
height = 500

renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:scale})
stage = new PIXI.Stage(0xFFFFFF)    

if scale is 2
    bgImg = '[email protected]'
else
    bgImg = 'img.png'
background = PIXI.Sprite.fromImage bgImg
stage.addChild background

The above code produces a canvas and image both with correct proportions on non-retina. However, when I run this on a retina display the canvas is twice the size and the image is 4 times the size. What am I doing wrong?

I am having some issues getting pixi.js 2.+ to work with retina displays.

scale = window.devicePixelRatio
width = 960
height = 500

renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:scale})
stage = new PIXI.Stage(0xFFFFFF)    

if scale is 2
    bgImg = '[email protected]'
else
    bgImg = 'img.png'
background = PIXI.Sprite.fromImage bgImg
stage.addChild background

The above code produces a canvas and image both with correct proportions on non-retina. However, when I run this on a retina display the canvas is twice the size and the image is 4 times the size. What am I doing wrong?

• javascript
• retina-display
• pixi.js

Share Improve this question Follow edited Mar 19, 2015 at 11:08 Brenwell asked Mar 19, 2015 at 10:38 BrenwellBrenwell 7311313 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

@2x is correct. It can be a folder name or appended to the image name.

assets/@2x/image.png or assets/[email protected]

Regarding canvas resize issue, can you run this and see if you have the same issue. http://adireddy.github.io/demos/haxe-pixi/v3/retina.html

Thanks to @Adi I got it working. Perhaps I have to set the width & height on the canvas before appending it. Not really sure, but it worked

@scale = window.devicePixelRatio
width = 960
height = 556

@_canvas = window.document.createElement("canvas")
@_canvas.style.width = width + "px"
@_canvas.style.height = height + "px"
container = document.getElementById 'container'
container.appendChild(@_canvas)

renderingOptions = 
  view: @_canvas
  resolution: @scale

renderer = new PIXI.CanvasRenderer(width, height, renderingOptions)