Brilliant Tips to Optimize the Performance of HTML5 Canvas

By | June 7, 2017

HTML5 canvas, now known to be as one of the most widely supported standards for 2D immediate mode graphics was a mere experiment at Apple. Ample of developers now count on it for their visualizations, multimedia projects, and gaming apps. As different people with different skills set work on it, thus there are lot of different opinions on the ways of optimizing the performance of the canvas  lingering around.Drawring with HTML5 Canvas

After working on this technology for quite some time now, I thought of consolidating my experience in this article. In this article, you will get to know some basic optimization techniques that are applicable to all sorts of computer graphics environments and also canvas-specific techniques that might vary with the improvement in canvas implementations.  Let’s find out!

Do not unnecessarily change the state of your canvas

When it comes to a state machine that is used to keep a track of things such as stroke and fill styles, along with previous points that are used to form the current path, the HTML5 canvas element needs to be used on the top of this state machine.

If you are trying to optimize the performance of the graphics, then the entire focus is generally only on the graphics rendering. But, doing any alterations in the state machine can also add a performance overhead. For instance, to render a scene you can use multiple fill colors, so it’s quite reasonable to render it by color instead of placement on the canvas. Moreover, if you wish to render a pinstripe graphic pattern, you can render a stripe, change colors, render the following stripe, etc:

Another way of doing this is by rendering all odd stripes together and then the even stripes:

Test the performance

In order to deal with this rapidly changing techniques of HTML5 canvas, JSPerf (jsperf.com) test cross-checks that every suggested optimization technique works or not. JSPerf is a web app that permits the developers to write performance tests on JavaScript. The focus of each test is on the result that the developer wishes to achieve, and comprises of multiple approaches that fetch the same result.

JSPerf tests every approach for several numbers of times as possible for a short time period and then produces a statistically valid number of iterations for each second. It is better to get a Higher score in the test. If you are visiting the JSPerf performance test page, then you can run the test on your browser, and then JSPerf stores the test results on Browserscope (browserscope.org).

Complete Web Developer Course
The Complete Web Developer Course 2.0
Web development is a very vast area and there are a lot of things to learn for and we keep learning as we move forward in web development. Sometimes new frameworks, sometimes new language updates and so on. Good thing about this course is it covers almost all important areas and make you a full stack developer.

Put your canvas calls in batches

Drawing is certainly an expensive operation, therefore it is suggested to load the drawing state machine that comprises of a long set of commands, and then you can use the video buffer to dump it. For instance, if you wish to draw multiple lines, it is advised to create one path that has all the lines in it and then use a single draw call to draw it.

Opt for multiple layered canvases for rendering complex scenes

As we know the fact that drawing is expensive and that too when you are drawing large images and therefore it is advised to avoid them if possible. Instead of using canvas for offering off screen, canvases layered on the top of one another can also be used.

By using transparency in the foreground, we can count on the GPU to combine the alphas together at the time of rendering. You can also use this, by positioning two canvases one on top of the each other.

The benefit of using one canvas here, is that while drawing or clearing the foreground canvas, we don’t need to do any changes in the background.

In order to boost the performance of your multimedia or gaming app, try to split it into foreground or background and try to render them on separate canvases.

Make use of the imperfect human perception and display the background only once or at a very slow speed as compared to the speed you are rendering the foreground (this will occupy the user’s attention). For instance, you can display the foreground every time you render, but the background is rendered only on the Nth frame. Further, it has been noted that this approach works well for any number of composite canvases, provided your app works well with this kind of structure.

Best ways to clear your HTML5 canvas

We are well aware of the fact that HTML5 Canvas is an immediate drawing platform, the scene is required to redrawn especially at each frame. This is the reason why it is important to clear the canvas for HTML5 canvas applications and games.

Clearing the complete canvas is often not required, but if you need to do it then there are two ways of doing it: calling context.clearRect(0, 0, width, height) or making use of a canvas-specific hack : canvas.width = canvas.width;.

While writing, clearRect generally performs better than the width reset version, however, it was seen that in some cases the canvas.width resetting command performed faster in Chrome 14.

Try not to use the floating point coordinates

Sub-pixel rendering is supported by HTML5 canvas, and there is no way to avoid this. If the developer is using non-integer coordinates to draw, then the software has this intrinsic ability to use anti-aliasing in order to smoothen the lines.

If you do not require the smoothed sprite, then you can use Math.floor or Math.round  to convert your coordinates into integers. There are several ways to convert your non-integer coordinates to integers, one of the most widely used ways is to add a half to the target number, and then after using bitwise operations on the resultant get rid of the fractional part.

Wrapping up!

This article covers a set of tips to optimize the performance of HTML5 canvas projects. I hope this optimizes your performance as a developer and helps you to develop niche applications.

Author Bio:

Elley Aloy is a Professional Mobile App Developer works at Mobiers. Mobiers is a prominent mobile apps development company that specializes in rendering innovative and out-of-box apps that harness the potential of cutting-edge HTML5 technology. The feature-rich, business-centric mobile apps developed by Mobiers are highly scalable and robust, which enhances the way your business interacts with your target audience.

More Web and Mobile App Development and Related Articles: