Canvas vs webGL

Canvas or WebGL - description, benefits, features. Which is better?

WebGL and Canvas - These two elements combine HTML5 and JavaScript. They have their own advantages and disadvantages, features and subtleties in use. But, both tools are aimed at creating and demonstrating the graphical components of HTML5. These can be bitmaps, website backgrounds, animated graphics, dynamic splash screens, as well as 2D and 3D browser games.

Each 'engine' has its own characteristics. And therefore, something will work better on Canvas, something on WebGL, and something will not work at all anywhere. That is why, when introducing graphical components into HTML5 through JavaScript, you must take into account absolutely all the features of the elements that you plan to use.

Everything you need to know about Canvas, and more

Let's start with the canvas, or whatever it's called 'canvas'. Yes, yes, we will talk about Canvas, and 'canvas' and 'canvas' are the so-called 'folk' nicknames for this element.

So what is Canvas? This is an HTML5 element with which you can add bitmap graphics to your code via JavaScript. Most often, graphics are drawn with canvas, as well as some animation components of browser games. Sometimes you will find videos embedded with Canvas, or even full-fledged browser-based video players.

Fun fact: Canvas can be quite confusing to robots that recognize captchas. The thing is that using the captcha canvas, not a finished image will be downloaded from the server, but an algorithm that will line up a set of points and thereby recreate the captcha image. For a person, all these dances with a tambourine are invisible. But the robot is unlikely to solve such a puzzle.

For the first time, the HTML5 canvas was introduced by Apple for use in their Safari and Dashboard browsers. In Internet Explorer, Canvas would not be supported to this day if not for Google. They created a browser extension, after installing which, IE can be considered as nothing but a browser. At the moment, Canvas is being turned to when it comes to designing graphs, adding animations, or for basic graphical elements in web applications.

Mozilla is working on its own project for Canvas. Its goal is to introduce graphics accelerators with which it will be possible to display 3D content. Officially, the idea is called Canvas 3D. Not that the wheel was invented before the Mozilla developers realized it, but there has long been an alternative - libraries. Including, for the implementation of three-dimensional graphics, there is Three. Perhaps Canvas 3D will be better than the usual canvas with all sorts of libraries. To judge in advance, at least, is stupid. But, one way or another, you can already work with 3D in Canvas, and it’s not clear what the new Mozilla project will bring.

Minimum requirements for displaying Canvas in HTML5 across browsers and platforms:

1. Internet Explorer 9
2. Chrome 3
3. Safari 3
4. Firefox 3
5. Opera 10
6. iOS3
7. Android 1

As you can see, finding a device or browser that doesn't support Canvas is pretty hard in today's world. This is only a plus for its use in HTML5, because the content that the canvas will be responsible for displaying will be seen by the user with a 99.9% guarantee.

The intricacies of using the canvas include not only the possibility of self-configuring graphic elements, but also the use of additional means of the visual component. These tools are gradients, outlines, shadows, as well as the width of the brushes, the style of connecting lines.

Of the features that you should consider before working with Canvas, it is worth highlighting the following:

1. Be careful with canvas sizes. By changing the width and height values, it will be recreated, and all the contents of the previous element will go into oblivion along with its settings.
2. By default, the starting point is not in the center, but in the upper left corner. It's good that there is an opportunity to move it.
3. Officially, 3D Canvas content is not supported. But, as we have already said, there are special libraries that open up an unknown three-dimensional world.
4. Color and font size encoding is the same as in CSS.

The advantages and disadvantages of Canvas are a rather debatable point. For some, some things are critical, while others do not even notice them. We have highlighted the main pros and cons of using Canvas in HTML5. The advantages include:

• Hardware acceleration available
• Possibility of point-by-pixel editing due to bitmap format
• The ability to use filters to retouch images
• A rich assortment of supported libraries
• Convenience of working with a large number of elements

Among the shortcomings, we have identified:

• Unable to clean up memory, which consumes a lot of CPU and RAM
• Low performance when using high resolution bitmap formats
• Need to manually draw each element individually
• Possibility to implement special beacon elements to monitor users' online activity

Based on the information provided, you can draw your own conclusions about the use of Canvas in HTML5. There are no significant barriers in the development of graphic content on this engine. And even the official absence of 3D does not prevent enthusiasts from creating browser games with three-dimensional graphics.

What you need to know about WebGL and what it is eaten with

Having talked enough about Canvas and discussed all its sides and facets, we can finally move on to WebGL. This is an element developed by the Khronos Group that allows you to create and display 3D graphical components through Canvas in HTML5. To put it simply, thanks to WebGL, you can add any 3D element to your site that will not only spin like diamonds in a jewelry, but with which you can interact.

There are several versions of this library:

• WebGL 1 is based on Open GL 2.0
• WebGL 2 is based on Open GL 3.0

The way WebGL works is as follows. All 2D and 3D graphics are built thanks to the code that is executed by JavaScript. Some elements can be carried out using an installed video card. Thanks to this, support for hardware graphics acceleration is implemented, and developers can write codes without leaving the environment of JavaScript, CSS and HTML web languages.

Development of 2D and 3D content involves the calculation of the target audience. Write for users with Radeon or Intel products, or maybe Nvidia? Optimize app for Core i5 or i3? Give preference to development for iOS or Android? None of this is related to WebGL development. After all, the main thing is that the current version of the browser supports the WebGL libraries. Your content will be available to any user - Windows, Android, Blackberry, iOS or Mac OS. All of them will be united by one thing - the browser through which they will view the content.

WebGL is supported in the following browsers on the following platforms:

• Mozilla 4
• Chrome 9
• Safari beta 5, public 8
• Opera 12
• Internet Explorer 11
• iOS
• Android
• Firefox mobile
• Chrome Android

WebGL saw the light of day thanks to a programmer from the USA who experimented with Canvas in every possible way. Later, Opera and Mozilla picked up the current trend and began developing their modernized project. After that, such world giants as Apple and Google joined them. From these companies, a staff of developers was formed, which in the spring of 2011 showed the world the first version of the WebGL library.

An interesting fact: the lack of WebGL support in Internet Explorer browsers below version 11 is due to an incident by Microsoft in 2011. So, the organization expressed its dissatisfaction with WebGL, referring to the too large list of permissions required for the libraries to work. It didn't take long for a response, and Mozilla told the concerned Microsoft folks that their Silverlight product required as much system access as WebGL. However, Microsoft considers it completely safe. It didn't take long for Internet Explorer to get WebGL support, thanks to Microsoft rethinking the problem and coming to an objective conclusion.

In the final, I would like to highlight the main advantages of WebGL:

• Cross-platform. Your content will be seen by users of any platform. When viewed, they will be combined by the browser, which is the main piece on this chessboard.
• Development in JavaScript - a fairly popular and relevant language
• The ability to clean up memory from 'garbage'. Thanks to this, it is possible to achieve maximum smoothness and optimization
• Because WebGL uses an onboard processor and graphics card to process graphical content, it is inherently resource intensive, comparable to some desktop applications

Conclusion and answer to the question 'Which is better?'

With the advent of HTML, the ability to create web content began to emerge. If at first only static content was supposed, then with the advent of JavaScript, access to more complex dynamic content was opened up. The power of modern HTML5 gave us a taste of 2D with Canvas. Later, libraries appeared that implemented the use of 3D in Canvas. More extensive and accurate use of three-dimensional content allowed the introduction of WebGL. Now developers have a place to roam in terms of graphical capabilities. Here you have high quality bitmaps, various animations and effects, as well as all sorts of options for processing graphics and its implementation in web applications. There are no longer those pitfalls that could be encountered before. With JavaScript in HTML5, you can create like an artist on a canvas.

It is simply impossible to give an unambiguous and precise answer, which is better - Canvas or WebGL. It all depends on your plans for web content and its implementation. There are disadvantages and advantages everywhere. The question is different - are they significantly noticeable to you, with the performance of a specific task? If the disadvantage does not affect your intention in any way, you can omit it. In any case, for a successful result, you must weigh all the pros and cons to make a final decision. To implement your project, you can use a lot of different libraries and frameworks. Some, on the contrary, will write all the code by hand. Everything depends on you. Create on canvas and create masterpieces of the web space!