Online Book Reader

Home Category

HTML5 Canvas [4]

By Root 6349 0
”

German – lang = “de”

Italian – lang = “it”

Japanese – lang = “ja”

Korean – lang = “ko”

Polish – lang = “pl”

Russian – lang = “ru”

Spanish (Castilian) – lang = “es”


This tag tells the web browser which character-encoding method to use for the page. Unless you know what you’re doing, there is no need to change it. This is a required element for HTML5 pages.

…


This is the title that will be displayed in the browser window for the HTML page. This is a very important tag, as it is one of the main pieces of information a search engine uses to catalog the content on the HTML page.

A Simple HTML5 Page


Now let’s look at this page in a web browser (this would be a great time to get your tools together to start developing code). Open your chosen text editor, and get ready to use your preferred web browser: Safari, Firefox, Opera, Chrome, or IE.

In your text editor, type in the code from Example 1-1.

Save the code as CH1EX1.html in a directory of your choosing.

Under the File menu in Chrome, Safari, or Firefox, you should find the option Open File. Click that selection. You should then see a box to open a file. (On Windows using Chrome, you might need to press Ctrl+O to open a file.)

Locate the CH1EX1.html that you just created.

Click Open.

You should see something similar to Figure 1-1.

Figure 1-1. HTML Hello World!

WARNING

This is one of only two examples in this entire book that will work with Internet Explorer 8 or earlier.

Basic HTML We Will Use in This Book

Many HTML tags can be used to create an HTML page. In past versions of HTML, tags that specifically instructed the web browser on how to render the HTML page (e.g., and

) were very popular. However, as browser standards have become more restrictive in the past decade, those types of tags have been pushed aside, and the use of CSS (Cascading Style Sheets) has been adopted as the primary way to style HTML content. Because this book is not about creating HTML pages (i.e., pages that don’t have Canvas in them), we are not going to discuss the inner workings of CSS.

We will focus on only two of the most basic HTML tags:

and .


This is the main HTML tag that we will use in this book. We will use it to position on the HTML page.

Example 1-2 uses a

tag to position the words “Hello World!” on the screen, as shown in Figure 1-2.

Figure 1-2. HTML5 Hello World! with a

Example 1-2. HTML5 Hello World!

CH1EX2: Hello World HTML Page With A DIV

Hello World!

The style="position: absolute; top: 50px; left: 50px;" code is an example of inline CSS in an HTML page. It tells the browser to render the content at the absolute position of 50 pixels from the top of the page, and 50 pixels from the left of the page.


Our work with will benefit from using the absolute positioning method with

. We will place our inside the
tag, and it will help us retrieve information, such as the relative position of the mouse pointer when it appears over a canvas.

The Document Object Model (DOM) and Canvas

The Document Object Model represents all the objects on an HTML page. It is language- and platform-neutral, allowing the content and style of the page to be updated after it is rendered in the web browser. The DOM is accessible through JavaScript, and has been a staple of JavaScript, DHTML, and CSS development since the late 1990s.

The canvas element itself is accessible through the DOM in a web browser via the Canvas 2D context, but the individual graphical elements created on Canvas are not accessible to the DOM. As we stated earlier, this is because Canvas works in immediate mode and does not have its own objects, only instructions on what to draw on any single frame.

Our first example will use the DOM to locate the

®Online Book Reader