Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情
趁著這篇來討論看看

Canvas 的情況：

情境： 這是一個寬高皆為 200 的 <canvas>，
並使用 Window.devicePixelRatio 為 2 的 MacBook Retina顯示器 開啟

[ Demo ]：
點下 Save Image 按鈕後，使用 Canvas.toDataURL() 方法將 的內容存下來並產生實體圖片

Q: 200x200 的 <canvas> 在 Window.devicePixelRatio 為 2 時，下載的 <canvas> 大小為多少？
選項1: 200x200 (1倍)
選項2: 400x400 (2倍)

答案： 200x200 (1倍，無視 Window.devicePixelRatio)

Window.devicePixelRatio 在 MacBook Retina 顯示器 為 2，
在手機上則可能為 3，但存下來的檔案皆為 200x200 (1倍)

PixiJS 的預設情況：

• PIXI.settings.RESOLUTION 為 1
• PIXI 實體 renderer 的 resolution 為 1

[ Demo ]

使用預設值放入圖片：

• 準備一張 100x100 的圓框圖：

• PIXI.Application 實體的寬高皆為 300 ，方便比較

[ Demo ]：
產生的 <canvas> 寬高為 300，圓框圖寬高為 100，與想像的差不多

const app = new PIXI.Application({
    width: 300,
    height: 300,
    backgroundColor: 0x1099bb,
});

帶入 Window.devicePixelRatio：

使用 PIXI.Application options.resolution設定，帶入 Window.devicePixelRatio

[ Demo ]：

• 指定 resolution 後，<canvas> 實體的寬高會改變，這不一定是我們想要的結果

• renderer 的 resolution 更改為 帶入的Window.devicePixelRatio 值，此例為 2

const app = new PIXI.Application({
    width: 300,
    height: 300,
    backgroundColor: 0x1099bb,
    
    /** 
      * window.devicePixelRatio 視顯示裝置而定，
      * 1、2、3 皆有可能
    **/
    resolution: window.devicePixelRatio
});

設定 options.resolution 後，設定 autoResize: true

[ Demo ]：
加上 autoResize: true 後，
就會是正確的 <canvas> 大小與期望的 renderer resolution

const app = new PIXI.Application({
    width: 300,
    height: 300,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio,
    autoResize: true
});

所以使用 ２倍大的圖片有差嗎？

測試方式：

• resolution 設定為 window.devicePixelRatio
• autoResize 設為 true
• 放入 100x100 大小的圖檔、
  200x200 大小的圖檔，並將寬高 乘以 0.5，
  讓兩個 Demo 的結果 大小看起來都是 100x100

[ Demo - 100x100 / Demo - 200x200 ]
截圖比較：有差

- 放大圖

不同解析度的 PixiJS 再匯出成實體檔案時，大小相同嗎？

實作把 PixiJS 的 <canvas> 內容匯出的功能：
比較：Demo - 100x100 / Demo - 200x200

匯出結果：

與 renderer 寬高相同，尺寸為 300x300

function saveImg() {
    app.renderer.extract.canvas(app.stage).toBlob((b) => {
        const a = document.createElement('a');
        document.body.append(a);
        a.download = 'save_src-100x100'; // 或是 save_src-200x200
        a.href = URL.createObjectURL(b);
        a.click();
        a.remove();
    }, 'image/png');
};

今日心得：
指定 resolution 為 window.devicePixelRatio 時，可感受到解析度變化
但需注意 運算所需資源 會直接翻倍，可能會讓裝置變慢、發燙或更耗電

參考連結：

• v4 Tips, Tricks, and Pitfalls#Resizing Renderer
• Resize to Parent Node
• Resize to Fullscreen