From Author:
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.
This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.
FAQ
A canvas element is a rectangular area on a webpage where graphics are dynamically created using JavaScript. It allows developers to control every pixel within the drawing area, providing a low-level way to display graphics directly in the browser.
The main advantages of using the canvas element include improved performance and speed as it reduces the number of DOM elements, memory savings since less information about DOM elements needs to be stored, and greater control over the graphics as developers can manipulate every pixel.
The disadvantages include increased complexity as animations on canvas require manual drawing of each frame using the requestAnimationFrame function. Additionally, canvas does not support CSS-based animations and transitions, making it more difficult to implement smooth and complex animations.
The Canvas API can utilize either CPU or GPU for rendering, depending on the browser's internal logic, while WebGL exclusively uses GPU rendering, which is often faster due to hardware acceleration. WebGL is also typically used with third-party libraries and is more complex, making it suitable for more graphically-intensive applications.
When using canvas on mobile devices, developers need to be mindful of the dimensions of the canvas to ensure it scales properly across different devices. Care must be taken to handle device pixelation and avoid unexpected artifacts that can degrade the user experience.
One might choose to use the canvas element over traditional DOM elements for applications that require extensive graphical operations and manipulations, as it offers superior performance by minimizing DOM interactions. It's especially beneficial in games and graphically intensive applications where control over every pixel is necessary.
Video Transcription
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.
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.
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.
Comments