# set canvas size

[three.js](..) ⟩ [renderer]() ⟩ set canvas size

{% tabs %}
{% tab title="💈範例" %}
```javascript
const canvas = renderer.domElement;

// calculate the real "resolution" size of the canvas
const pixelRatio = window.devicePixelRatio;
const width  = canvas.clientWidth  * pixelRatio | 0;
const height = canvas.clientHeight * pixelRatio | 0;

const needResize = 
    canvas.width  !== width || 
    canvas.height !== height;

if (needResize) {
    // set canvas "resolution" size
    // - false: without altering canvas's CSS settings.
    renderer.setSize(width, height, false);
}
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] three.js ⟩ [Responsive Design](https://threejs.org/manual/#en/responsive)
{% endtab %}

{% tab title="👥 相關" %}
* JS ⟩ [int](../../../js/val/prim/num/int "mention")
{% endtab %}

{% tab title="📘 手冊" %}
* WebGLRenderer ⟩ [.setSize()](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.setSize)
{% endtab %}
{% endtabs %}
