# Offscreen Canvas compatibility?

**URL:** <https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386>\
**Category:** Questions\
**Tags:** canvas\
**Created:** [October 5, 2018, 9:19am UTC](https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386 "2018-10-05T09:19:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Norman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/norman/32/4824_2.png) [@Norman](https://discourse.threejs.org/u/Norman)\
**Post date:** [October 5, 2018, 9:19am UTC](https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386/1 "2018-10-05T09:19:36Z")

</div>

After spending a lot of time in development with offscreen canvas, I just found out that there might be a serious compatibility problem -especially with older mobile:

![html5-offscreenCanvas](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/2/2c6f0d253c5ba8a29aab357915e789685e2eea9a.png)  
[https://www.lambdatest.com/offscreenCanvas](https://www.lambdatest.com/offscreenCanvas)

Although in my tests with three.js it IS supported in the latest FF, Chrome, Opera in Windows which means it was added recently, but what is the support in older mobiles? Are there any free offscreencanvas statistics?

I mainly need offscreen canvas to render text properly before I copy it to textures, what alternative would you suggest?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 5, 2018, 3:01pm UTC](https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386/2 "2018-10-05T15:01:19Z")

</div>

I think you are mixing two topics. `OffscreenCanvas` is a new API that allows canvas drawing to occur with no connection to the DOM. It enables rendering in a worker, like shown in the following demo:

[https://threejs.org/examples/#webgl\_worker\_offscreencanvas](https://threejs.org/examples/#webgl_worker_offscreencanvas)

Rendering text or shapes to an ordinary [HTML5 canvas element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) and using this canvas as a texture has nothing to do with `OffscreenCanvas`.

BTW: Yes, `OffscreenCanvas` is an experimental API and the respective [browser support](https://caniuse.com/#feat=offscreencanvas) is in need of improvement.

---

<div class="post-metadata">

**Author:** ![Norman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/norman/32/4824_2.png) [@Norman](https://discourse.threejs.org/u/Norman)\
**Post date:** [October 5, 2018, 3:10pm UTC](https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386/3 "2018-10-05T15:10:09Z")

</div>

Mugen87, you mean that this:

```
var offScreenCanvas = document.createElement('canvas');
offScreenCanvas.width = 1024;
offScreenCanvas.height = 1024;
var ctx = offScreenCanvas.getContext("2d");  

```

(aside the similar var name) has nothing to do with OffscreenCanvas?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 5, 2018, 3:47pm UTC](https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386/4 "2018-10-05T15:47:48Z")

</div>

Correct. This is a normal usage of the HTML5 Canvas API.

---

<div class="post-metadata">

**Author:** ![Norman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/norman/32/4824_2.png) [@Norman](https://discourse.threejs.org/u/Norman)\
**Post date:** [October 5, 2018, 3:54pm UTC](https://discourse.threejs.org/t/offscreen-canvas-compatibility/4386/5 "2018-10-05T15:54:57Z")

</div>

OK, thanks for clarifying this! A bit confusing though, because we are used to call it “offscreen canvas” because it is exactly that. I think they should have picked a different name for that new API to make a distinction between the two.