Table of contents
Canvas or WebGL - description, benefits, features. Which is better?
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.
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:
- Internet Explorer 9
- Chrome 3
- Safari 3
- Firefox 3
- Opera 10
- 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:
- 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.
- 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.
- 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.
- 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
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
- 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.
- 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?'
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!