In this talk, we will dive deeper into the enormous potential of the HTML5 Canvas element as a tool for game development. Starting with an overview of the Canvas API and its graphics capabilities, we will look at the benefits for rendering 2D graphics for web games. Participants will gain insight into optimization techniques, advanced drawing and animation techniques and strategies for leveraging the full capabilities of Canvas to create smooth, high-performance gaming experiences. Filled with real-life examples, this talk is a must-see for professionals looking to take their web games to new heights of performance.
Increase the Performance of Your Games using Canvas
AI Generated Video Summary
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.
1. Introduction to Canvas Element
Hello, my name is Ilya Chernevsky, and I work as a web developer at Evolution Company. Today, I want to tell you about my experience of using canvas element in games and web applications to increase performance. Let's look at the advantages and disadvantages of canvas. The advantages include performance and speed, memory saving, and control over every pixel. The disadvantages include difficulty in implementing animations, complexity in manipulating pixels, and considerations for device pixelation. When people talk about Canvas, they most often mean the Canvas API and the Canvas rendering context-2d interface. However, if you want to use all power of GPU, then you should consider using WebGL.
Hello, my name is Ilya Chernevsky, and I work as a web developer at Evolution Company and create front end of games. Today, I want to tell you about my experience of using canvas element in games and web applications, first of all, to increase performance.
Let's look at this element in one of Evolution games, it contains approximately 4,000 DOM elements, basically, these are SVG elements with their own styles, attributes, classes, sizes, positioning, et cetera. You may say that 4,000 is not so much, perhaps, but you know what could be better? I think better is to have only one DOM element.
Let's look at the advantages and disadvantages of canvas. Let's start with the advantages. First of all, and I think, most importantly, it's performance and speed. We have just only one DOM element. Second is memory saving, since there is no need to store information about a large number of DOM elements. And control, developer can control every pixel in the drawing area. Now let's look at the existing disadvantages of this approach. One of the most obvious is animations. They are more difficult to implement. Of course we can't use animation and transition property from CSS. In the case of DOM elements, for example, when they are moved, the browser itself erases the old object and draws the new one in a new place. And in the case of Canvas, developer forced to independently draw each frame using request animation frame function from browser web API. And second con is complexity. In general, DOM elements are easier to manipulate than pixels and using Canvas API is more difficult. In the case of DOM elements, browser does part of the work for us. And finally, features of working with displays, with device pixelation, more than one. For example, when we work with smartphones, you have to keep an eye on the dimensions of the Canvas. And sometimes this can lead to unexpected artifacts. And in general, you're forced to think more about other features of Canvas that may not be immediately obvious.
When people talk about Canvas, they most often mean the Canvas API and the Canvas rendering context-2d interface. This is the simplest and low-level way to render in the browser. However, if you want to use all power of GPU, then you should consider using WebGL. WebGL API is used with the same HTML canvas element, but for rendering it's used a different drawing context, WebGL rendering context, and also use a different API, WebGL API.
2. Comparison of Canvas API and WebGL API
Canvas API and WebGL API are two ways to use the canvas element. The Canvas API can use CPU or GPU rendering, while the WebGL API uses only GPU and hardware acceleration. The complexity of using these technologies differs, with Canvas API being less difficult to use. However, WebGL is more challenging and often requires third-party libraries. The image on Canvas is a raster, which can result in decreased image quality when zoomed in. In conclusion, using Canvas in applications can significantly improve performance, but it's important to consider the increased complexity and cost of development.
So with one HTML element canvas, we can use two different APIs, Canvas API and WebGL API. Let's compare these two ways. Canvas API can use CPU or GPU rendering. The browser, itself, decides this according to its internal logic. However, based on its internal algorithms, the browser decides to use CPU. In this case, graphics hardware acceleration will not be used because it's physically located on the graphics card.
However, it's not obligatory that using hardware acceleration will necessarily lead to increased performance, often it will but not always. WebGA API uses only GPU and also hardware acceleration if the graphics card has it, which it almost does. This is almost always fastened because the GPU is optimized for graphics and this release CPU resources to run the rest of the application.
So, it's also has to be mentioned that complexity of using both of these technologies is different. While Canvas API is less difficult to use and can be used without external libraries, for example, WebGL is much more difficult to use and has a much higher entrance threshold. It's more often used with third party libraries, such as Babylon.js, for example, or 3.js. Unlike HTML and SVGA elements, the image on Canvas is a raster. Therefore, for example, when we zoom in Canvas element, we will see that image quality has become worse. Also, text written on Canvas will be blurry when zoomed in, and to improve quality, we will be forced to re-render.
In conclusion, I want to say that Canvas is modern, low-level, high-performance element. Using it in your applications can significantly improve performance. However, it's important to understand that complexity and cost of development will also increase. It's especially true when your application has animations. Therefore, it's important to evaluate all of these factors and make the right decision. Thank you for your attention.