Increase the Performance of Your Games using Canvas

Rate this content
Bookmark
The video discusses how using the canvas element in web development can improve game performance and speed. The speaker highlights the advantages of the Canvas API, such as memory saving and control over every pixel, while noting its disadvantages, like the complexity of implementing animations. For more intensive graphics, the WebGL API is recommended due to its exclusive use of GPU rendering and hardware acceleration. The talk also covers considerations for mobile devices, such as handling device pixelation and scaling. The speaker mentions that the Canvas API is less difficult to use compared to WebGL, which often requires third-party libraries. The video concludes that while using the canvas element can significantly enhance performance, it comes with increased complexity and development costs.

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.

Ilia Chernetskii
Ilia Chernetskii
8 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to Canvas Element

Short description:

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

Short description:

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.