Tutorials for Optimizing HTML5 Rendering with Layered Canvas

This article mainly introduces the tutorial on using layered canvas to optimize HTML5 rendering. It comes from the technical documents of the official IBM website developer. Friends who need it can refer to the following introduction

Typically, when playing 2D games or rendering HTML5 canvas, optimizations are required to be performed to use multiple layers to build a synthetic scene. In low-level renderings such as OpenGL or WebGL, rendering is performed by cleaning and drawing the scene frame by frame. After rendering is implemented, the game needs to be optimized to reduce the amount of rendering, and the required cost varies from situation to situation. Because the canvas is a DOM element, it enables you to layer multiple canvases as an optimization method.

Common abbreviations

• CSS: Cascading Style Sheets

  DOM: Document Object Model

  HTML: HyperText Markup Language (HyperText Markup Language)

This article will explore the rationality of layering canvases. Understand the DOM settings to enable a layered canvas. Using hierarchical optimization requires various practices. This article will also explore some concepts and techniques for optimization strategies that extend the hierarchical approach.

You can download the source code for the examples used in this article.

Select an optimization strategy

Choosing the best optimization strategy can be difficult. When choosing a hierarchical scenario, you need to consider how the scenario is composed. Rendering of fixed objects on large screens often requires the reuse of several components, which are excellent candidates for research. Effects such as parallax or animation entities often require a lot of varying screen space. It is best to pay attention to these situations when exploring your best optimization strategies. Although the hierarchical optimization of canvas requires several different techniques, performance will often be greatly improved after correct application of these techniques.

Settings layer

When using the hierarchical method, the first step is to set the canvas on the DOM. Normally, this is simple, just define the canvas element and put it in the DOM, but the canvas layer may require some extra style. When using CSS, there are two requirements for successfully implementing canvas hierarchy:

Each canvas element must coexist in the same position in the viewport.

Each canvas must be visible under another canvas.

Figure 1 shows the general overlap concept behind the layer settings.

Figure 1. Layer example

The steps to set up the layer are as follows:

• Add canvas elements to the DOM.

  Add canvas element positioning styles to support hierarchy.

  Style the canvas elements to generate a transparent background.

Set the canvas overlap stack

Creating an overlay stack in CSS may require a small amount of styles. There are many ways to overlap using HTML and CSS. The examples in this article use a <div> tag to contain the canvas. The <div> tag specifies a unique ID that applies the style to its child HTML5 canvas elements, as shown in Listing 1.

Listing 1. Canvas Positioning Styles