Use HTML tags to supplement canvas (ii) animation and text rendering

Brief introduction

Common abbreviations

CSS: Cascading Style Sheets

DOM: Document Object Model

HTML: Hypertext Markup Language

UI: User Interface

In the 1th installment of this two-part series, we discussed how to make canvas and HTML elements work together to build rich Internet applications.

In this article, we'll review the criteria for choosing canvas or HTML-centric architecture, understanding animation considerations, and ways to overcome text rendering limitations, that is, by layering HTML and canvas elements, laying the groundwork for video games, taking advantage of each approach. Figure 1 shows the basics of the space shooting game example in this article.

Figure 1. A sample application that combines HTML and canvas elements

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

Architecture

When building an application with a large number of graphical components, interactive experiences, and visualizations, it is important to understand the tools available for this task. This section explores how to implement UI components using HTML, and how to implement animation components using canvas.

User interface

Although canvas may have impressive graphics performance, it is not always the best choice for rich UIs; HTML elements may be more appropriate. Many rich Internet applications contain a variety of components, each with different uses and requirements. The hybrid approach of combining canvas and HTML elements is the most effective way to achieve your goals.

The sample application leverages the layered technology in Figure 2. Canvas is primarily responsible for real-time graphics and animations, while several HTML elements will be overwritten to form individual UI components.

Figure 2. Put HTML elements on top of canvas