Features that do not support canvas mode

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. 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

Graphics alpha should work in CANVAS mode.

Missing tint (WEBGL only) can be a problem.

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

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.

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

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.

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

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

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.

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.

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