Is there any reason to use WebGL instead of 2D Canvas for 2D games / applications?

Question

Is there any reason besides performance for using WebGL instead of 2D-Canvas for 2D games / applications games?

In other words, what 2D functionality does WebGL offer that cannot be achieved with 2D-Canvas?

Answer 1

Looking at this question from the other side:
how does a developer choose one technology over another?

• integrates better into an already built system
• easier to use
• faster
• has more features or better suits their needs.
• cost
• more platfrom-independentant

So, I will discuss the differences between canvas and webGL APIs regarding these qualities.

---

Both canvas and webGL are JavaScript APIs. Therefore, they are almost the same in terms of integration (binding). They both have a number of libraries / engines that can speed up your encoding. Different libraries provide you with different ways to organize the code, so it differs in how you structure the code around the drawing API, but it is still pretty much the same (as all the code is linked with it).

If you use a library, the ease of writing code depends on the library itself.
But if you write code from scratch, the canvas API is much easier to learn and understand, it requires minimal mathematical knowledge. Development is fast and direct. WebGL needs a developer with strong mathematical skills who fully understand the creation of the pipeline and know what it does. These people find it harder to find, production is slower (due to the size of the code and the difficulty to integrate into the rest), and therefore it costs more.

WebGL is faster and has more features. Without a doubt. This is the native 3d API and gives you full access to the rendering pipeline, and all code and effects are faster and more customizable. With webGL there really is no limit.

Both canvas and webGL are html5 goodies. Typically supported devices support, while others.

So to summarize:

• merging drawing API code and the rest (integration): similar
• ease of use:
  • (with library) canvas = webGL
  • (from scratch) webGL <canvas
• speed: webGL> canvas
• features: webGL> canvas
• cost: webGL is much more expensive.
• platform: very similar

Hope this helps.

R. S. Open for discussion.

Answer 2

The biggest advantage is pipeline programmability and productivity. For example, let's say that you draw 2 blocks one above the other, and one is hidden, some GL implementations have the ability to drop a hidden box.

As for comparisons, since there is no quick way to create a table, I just uploaded a snapshot of the comparison table below. Three.js function is added for completeness only.

Answer 3

What 2D capability does WebGL offer that a 2D canvas is not working? The largest IMHO - programmable flash shaders on graphic equipment. For example, in WebGL, you can implement the Conway Game of Life game in a shader on your 3D equipment:

http://glslsandbox.com/e#207.3

This type of 2D display will only work on the processor, and not on the GPU, with a 2D canvas. All calculations will be implemented in JavaScript and will not be as parallel as the GPU, even with the help of web workers. This is just one example, of course, all sorts of interesting 2D effects can be implemented using shaders.

Answer 4

Speaking from the experience of my own applications , graphical shaders were the only reason I needed WebGL support. Ease of use doesn't really matter to me, since both structures can be dropped using three.js. Assuming that I don’t need shaders, I allow using any framework to maximize browser / machine support.

Answer 5

Well, performance will be one of the biggest reasons because when you code a game, it should be fast. But there are a few more reasons why you might need to select WebGL on top of the canvas. It offers the possibility of shader coding, lighting and scaling, which is important if you are making a commercial game application. Also the canvas becomes laggy after 50 sprites or so.

Answer 6

You can't do anything with Canvas that you can't work with webGL: the canvas allows you to crush bytes with get / putImageData, and you can draw lines, circles, ... programmatically using webGL.
But if you want to make quite a few drawings, as well as some effects at a speed of 60 frames per second, the performance gap is so high that it will not be possible with the canvas when it works fine in webGL. Performance is the root function.

However, webGL is quite difficult to program: see if there is enough canvas for you or are you looking for a library that will ease the pain ...
Another disadvantage: it does not work on IE (but what does it do?) And on some mobile phones.
See here for compatibility: http://caniuse.com/webgl

Answer 7

How do you specifically want some classic 2d things that don't work well with canvas:

• color conversions (e.g. sprite blinking)
• refill raster images
• rotation cards under rotation (under the canvas, some implementations will create seams)
• deep stratification (implementation dependent)
• multiplicative or additive mixing

... but of course you have access to pixels, so you can do anything, including the above, manually. But it can be really, really slow. You can emscripten Mesa openGl to make the canvas theoretically.

Another big reason to use webGL would be that the result is very easy to transfer to another location. It also makes the skill more valuable.

The reasons for using the canvas is that it is still better supported, and if you learn to make pixels by pixels, which is also a very valuable lesson.

Answer 8

Since WebGL is a particularly new technology, and the HTML5 canvas is more specific what you want

Using

Depends on your users. If you think your users will use mobile devices, I would suggest

HTML5 canvas, but if you want to improve 2D rendering, I would use WebGL. So what can you do if

use on portable porting with HTML5 else if they are on a platform that supports WebGL.

For example:

if (window.WebGLRenderingContext) { webGLcanvasApp() } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { html5CanvasAppFMobile() } else { html5CanvasApp() } 

Sources:
Correct way to detect WebGL support?
What is the best way to discover a mobile device in jQuery?