# Features that do not support canvas mode

**URL:** <https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951>\
**Category:** Phaser 3\
**Created:** [February 22, 2021, 1:24pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951 "2021-02-22T13:24:16Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rlsharp](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@rlsharp](https://phaser.discourse.group/u/rlsharp)\
**Post date:** [February 22, 2021, 1:24pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/1 "2021-02-22T13:24:16Z")

</div>

Some Phaser features do not seem to support canvas mode. Examples are using the alpha property with the graphics class. Also for some lighting features such as light2D. See [link](http://labs.phaser.io/edit.html?src=src/game%20objects/lights/tilesprite%20light.js). I expect there are more.

My question is whether this is a problem for many of you? Like most I want/need my games to be playable by most if not all kids. I create educational games and would not want to exclude any students. Are there many instances now-a-days of devices and browsers people use that do not support WebGL? If so I will need to not use any of the nice features that do not support the CANVAS mode.

Ron

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 22, 2021, 3:53pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/2 "2021-02-22T15:53:17Z")

</div>

Graphics alpha should work in CANVAS mode.

Missing tint (WEBGL only) can be a problem.

---

<div class="post-metadata">

**Author:** ![rlsharp](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@rlsharp](https://phaser.discourse.group/u/rlsharp)\
**Post date:** [February 22, 2021, 4:40pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/3 "2021-02-22T16:40:57Z")

</div>

Thanks for responding. Below works with WebGL and does not work when using CANVAS.  
With Canvas I get a solid color with no alpha. But the real point of my question is that it  
does seem there are features which are not supported in CANVAS mode and I would like  
to know how big of a problem that is? Or put another way how often do people run into  
users that can not run their game due to their device/browser does not support WEBGL?  
This is for all devices, pc, mac, android, ios, tablets, etc.

this.add.graphics()  
.lineStyle(5, 0xaaffaa, 0.2)  
.strokeRectShape(FrogBox.obj)  
.fillRectShape(FrogBox.obj)  
.fillStyle(0xaaffaa, .3)

Ron

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 22, 2021, 5:58pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/4 "2021-02-22T17:58:19Z")

</div>

You need to call `fillStyle()` before `fillRect()`.

Bear in mind that Canvas-only devices can still run your game. It’s just a matter of which WebGL-only features you consider essential.

---

<div class="post-metadata">

**Author:** ![rlsharp](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@rlsharp](https://phaser.discourse.group/u/rlsharp)\
**Post date:** [February 22, 2021, 7:05pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/5 "2021-02-22T19:05:50Z")

</div>

Thanks - great catch on the order thing. Odd it worked in WebGL but not canvas.

To fully understand the impact of using a WebGL-only feature I need to know what part  
of my user base it may affect. And that is my primary question. From peoples experience  
what percentage of current user devices do not support WebGL? It seems nearly all browsers  
do support it so it comes down to the user devices. Since nearly everything comes with a  
GPU today (even RPi) it would seem nearly every user could run a webGL game and thus  
using a critical WebGL feature is ok. But I want to get other opinions and more importantly  
any real experience.

Ron

---

<div class="post-metadata">

**Author:** ![rich](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rich/32/4_2.png) [@rich](https://phaser.discourse.group/u/rich)\
**Post date:** [February 23, 2021, 11:30am UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/6 "2021-02-23T11:30:56Z")

</div>

You need to use your own site metrics to answer this question. It varies _dramatically_ from site to site, geographic location to location, age of user, etc. There is no single answer you should rely on.

---

<div class="post-metadata">

**Author:** ![rlsharp](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@rlsharp](https://phaser.discourse.group/u/rlsharp)\
**Post date:** [February 23, 2021, 1:15pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/7 "2021-02-23T13:15:24Z")

</div>

Thanks for taking the time to respond. I am not sure I agree with your conclusion that game development and audience are so random that we can not learn from the experience of each other. I plan to make my games available to everyone, everywhere so any information would be helpful. I certainly was not going to rely solely on a single answer or even make my decision just using this data regardless of how many answered.

Ron

---

<div class="post-metadata">

**Author:** ![JasonSS](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JasonSS](https://phaser.discourse.group/u/JasonSS)\
**Post date:** [March 10, 2021, 9:32am UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/8 "2021-03-10T09:32:49Z")

</div>

Are there any plans to implement these features for Canvas mode?

I noticed `RenderTexture.draw()` doesn’t honor scale or tint (works in GL mode, though). You can confirm it using the “paint” example of Phaser and changing mode to `CANVAS`, then set brush size to something big like 250.

[http://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/paint%20interpolated.js&v=3.53.1](http://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/paint%20interpolated.js&v=3.53.1)

---

<div class="post-metadata">

**Author:** ![rlsharp](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@rlsharp](https://phaser.discourse.group/u/rlsharp)\
**Post date:** [March 10, 2021, 1:45pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/9 "2021-03-10T13:45:08Z")

</div>

It is a good question. I don’t know. Perhaps someone reading does. I started this thread mainly to see if developers have seen many instances where people do not have devices that support WebGL. If by now nearly all devices support WebGL then it really does not matter if a feature is written for Canvas mode.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [March 10, 2021, 1:57pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/10 "2021-03-10T13:57:11Z")

</div>

If you don’t need Phaser 3’s extra features, maybe you could go with Phaser 2 (CE).  
That used a version of Pixi that did try to do everything on both modes.

---

<div class="post-metadata">

**Author:** ![rlsharp](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@rlsharp](https://phaser.discourse.group/u/rlsharp)\
**Post date:** [March 10, 2021, 2:15pm UTC](https://phaser.discourse.group/t/features-that-do-not-support-canvas-mode/8951/11 "2021-03-10T14:15:50Z")

</div>

An idea, but our project is a continuing development and we certainly want to take full advantage of all the new features including moving to Phaser 4 when it comes out. The only good solution is to just not use those features which depend on WebGL iff there is still a set of devices out there in use that do not support WebGL. It is this question that I can not seem to find any experience within the group. Thanks for responding. Ron
