Javascript Pixi.js视网膜显示画布的大小增加了一倍

我在让pixi.js 2.+使用视网膜显示器时遇到一些问题

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 = 'img@x2.png'
else
    bgImg = 'img.png'
background = PIXI.Sprite.fromImage bgImg
stage.addChild background

---

上面的代码生成画布和图像，两者在非视网膜上的比例都正确。然而，当我在视网膜显示器上运行时，画布的大小是它的两倍，图像的大小是它的4倍。我做错了什么？

@2x是正确的。它可以是文件夹名称，也可以附加到图像名称

assets/@2x/image.png或assets/image@2x.png

关于画布调整问题，您是否可以运行此程序并查看是否存在相同的问题。

---

多亏了@Adi，我才得以工作。也许我必须在添加画布之前设置画布的宽度和高度。不是很确定，但它起作用了

@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)

---

谢谢，这解决了我一半的问题，但我仍然有一个问题，那就是整个画布的大小是原来的两倍，而不是分辨率。至少现在图像的大小只有原来的两倍，不再是原来的4倍了。你的例子加载的方式与我预期的一样正确。所以，我检查了你的代码，使它正常工作。见下面的答案。