# Resizing WebGL canvas on old Android devices

**URL:** <https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474>\
**Category:** WebGL\
**Created:** [January 24, 2024, 12:45am UTC](https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474 "2024-01-24T00:45:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![8Observer8](https://community.khronos.org/letter_avatar_proxy/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://community.khronos.org/u/8Observer8)\
**Post date:** [January 24, 2024, 12:45am UTC](https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474/1 "2024-01-24T00:45:51Z")

</div>

The next code snippet works as expected on Android 13. It resizes WebGL canvas in Chrome Android browser without problems: [Plunker - gl-viewport-js](https://plnkr.co/edit/H3Swhi3WweVmwgxa)

 ![image](https://community.khronos.org/uploads/default/original/2X/0/0d66a8d75908682d48f5f59278cfe5925822f34c.png)

But on Android 7 (Redmi 4X) it draws only the default size of canvas (300x150):

![image](https://community.khronos.org/uploads/default/original/2X/7/7bd2796501e4de8ff7f7f31a7d18dd7723504db1.png)

Is it possible to solve it? I set a view port like this:

```js
            window.onresize = () => {
                const dpr = window.devicePixelRatio;
                gl.canvas.width = Math.round(gl.canvas.clientWidth * dpr);
                gl.canvas.height = Math.round(gl.canvas.clientHeight * dpr);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
                draw();
            };

```

---

<div class="post-metadata">

**Author:** ![8Observer8](https://community.khronos.org/letter_avatar_proxy/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://community.khronos.org/u/8Observer8)\
**Post date:** [February 9, 2024, 7:32pm UTC](https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474/5 "2024-02-09T19:32:24Z")

</div>

I updated my question.

Cross-refs:

- [javascript - Resizing WebGL canvas on old Android devices - Stack Overflow](https://stackoverflow.com/questions/77873424/resizing-webgl-canvas-on-old-android-devices)
- [Resizing WebGL canvas on old Android devices - JavaScript - SitePoint Forums | Web Development & Design Community](https://www.sitepoint.com/community/t/resizing-webgl-canvas-on-old-android-devices/439288)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://community.khronos.org/letter_avatar_proxy/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://community.khronos.org/u/8Observer8)\
**Post date:** [February 11, 2024, 12:36pm UTC](https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474/6 "2024-02-11T12:36:08Z")

</div>

I don’t know why but when I set antialias to false it works without the problem for pure WebGL, Three.js, and Babylon.js. My solution - do not use `antialias`:

WebGL:

```js
const gl = canvas.getContext("webgl", { antialias: false });

```

Three.js

```js
const renderer = new THREE.WebGLRenderer({ antialias: false });

```

Babylon.js:

```js
const engine = new BABYLON.Engine(canvas, false);

```

- Three.js topic: [The viewport doesn't scale on old device (Redmi 4X, Android 7, Chrome) · Issue #27723 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/issues/27723)
- Babylon.js topic: [The viewport doesn't scale on old device (Redmi 4X, Android 7, Chrome) - Bugs - Babylon.js](https://forum.babylonjs.com/t/the-viewport-doesnt-scale-on-old-device-redmi-4x-android-7-chrome/47952)