Canvas Performance

In this article, we talk about the performance rules in webpages and the importance of the performance in Canvas. Then, some solutions are presented to improve the performance.

These mentioned items are demonstrating the general performance rules which It’s good to know to have better performance sides.

1- Under 100 milliseconds is instant.

2- A 100ms to 300ms delay is sensible.

3- One second is about the limit for the user’s flow of thought to stay uninterrupted.

4- Users expect a site to load in 2 seconds.

5- After 3 seconds, 40% of visitors will abandon your site.

6- 10 seconds is around the limit for keeping the user’s attention.

Tools for understanding client-side performance

Most modern applications spend more time in the browser than on the server-side. The reason is that newer applications now are using JavaScript frameworks such as React and AngularJS.

Two of the best tools to use to figure out client-side performance are:

1- Google PageSpeed Insights

a service that analyzes the content of a web page and generates suggestions to make your pages load faster.

Reducing page load times reduces bounce rates and increases conversion rates.

2- Google Lighthouse

is an open-source, automated tool for improving the quality of web pages. Your front-end developer should at a minimum be using Lighthouse metrics, which are available in Google Chrome tools.

What is the Canvas?

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low-level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

How we can improve the performance?

1- Canvas Worker

We can use offscreen canvas as a canvas worker to create a separate thread for rendering the canvas. Since workers run inside a separate thread, this means that expensive app-related JS logic can not slow down your Canvas rendering performance and vice versa.

Just one point there is here: it doesn’t be supported in all browsers

Chrome, Edge already supports the new API in a good way.

it is important to know that the Mozilla (Firefox), as well as the Webkit (Safari) teams, are actively pushing this topic.

2- Pre-render repeating objects

In case we need to use repeating items on the canvas, we can offload them to an offscreen canvas. You can then render the offscreen image to your primary canvas when we need it.

3- Integer values

Using integer values for the positions and sizes helps to increase performance.

4- Use multiple layers

Adding different layers of canvas helps to improve the performance. For example, we can separate the part of the items which are dynamic from the static ones that we do not want to change.

5- Writing UI tests for performance

When getting started with performance testing, don’t overlook another asset your software team probably already has — a functional testing script. As you can see below:

Eventually, you can see the demo as follows:

Conclusion

The performance is important when we are using canvas. It should work fast on different browsers and computers. In order to improve the performance of Canvas, it is vital to add different performance automated tests to check different parts of code can be run in the expected time.