Use HTML tags to supplement canvas (i) mixed use of canvas APIs and HTML/CSS models

Brief introduction

In part 1th of this series, you will create an application that combines the advantages of the canvas API and the HTML/CSS two models. The canvas API is an ideal choice for WEB applications that require high-performance, low load graphics. However, it is short-sighted to overlook the advantages of the traditional HTML/CSS model by simply designing the entire application around canvas. Rather than taking it for granted, learn some features that are useful in html/css but are difficult or impossible to implement in canvas.

Common abbreviations

API: Application Programming Interface

CSS: Cascading Style Sheets

HTML: Hypertext Markup Language

UI: User Interface

This article will use a "mixed" approach to design your application so that it can take advantage of both traditional HTML components and canvas elements. This article will later discuss the purpose of adopting this approach, including why the implementation is not ideal based entirely on canvas, and discusses the advantages and disadvantages of the traditional HTML model compared to the canvas API. Some examples also help you plan the layout and interaction of HTML and canvas elements as you design your application.

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

Advantages of HTML and CSS models

In some scenarios, traditional web models that use HTML and CSS are more advantageous. This section explores the most useful benefits of the HTML model, which is not well supported in the canvas API, or is not supported at all, especially for its robust text support and the benefits associated with semantic HTML tagging.

Robust text support for HTML

One of the strengths of HTML is that it makes it easy to annotate text with style symbols, including formatting tags such as <b></b> and CSS rules like font-weight:bold.

On the other hand, the canvas API exposes the Filltext () method to render the text string as a bitmap. This is a simple, low-level call, but there are many limitations. One of the biggest limitations is that you can apply a uniform style rule only to text strings that are provided to Filltext (). The "style rule" described here can be seen as a rule that sets the font, size, color, and so on (similar to CSS rules).

Text with uniform style

Consider the text in Figure 1.

Figure 1. Style text

Because the text contains a uniform style rule (red, italic, and italicized word), you can display this text nicely using either HTML/CSS or canvas.

The code in Listing 1 and Listing 2 compares how to render this text using HTML and CSS and canvas.

Listing 1 shows the text in Figure 1 that is rendered using HTML and CSS.

Listing 1. Use uniform styles to render text in HTML and CSS

<style>

. uniform-style {

Font:italic 12px Arial;

color:red;

}
</style>
<span class= "Uniform-style" >

Variety is the spice of life!
</span>

Listing 2 shows the same text that was rendered using canvas.

Listing 2. Rendering text in canvas using a uniform style

var canvas = document.getElementById (' My_canvas ');
var context = Canvas.getcontext (' 2d ');

Context.font = ' italic 12px Arial ';
Context.fillstyle = ' red ';
Context.filltext (' variety is the spice of life! ', 0, 50);