Increase the Performance of Your Games using Canvas

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.

Firstly, what is canvas? And it's core canvas is a rectangular area where we can dynamically create graphics using JavaScript. Drawing on canvas provides a low level way to display graphics in the browser. DOM operations in the browser are considered quite slow, this is why, for example, React team developed virtual DOM concept to minimize handling DOM elements.

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.

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.