HTML5 is the current iteration of HTML, the HyperText Markup Language. HTML was first standardized in 1993, and it was the fuel that ignited the World Wide Web. HTML is a way to define the contents of a web page using tags that appear within pointy brackets, < >.
This makes HTML5 Canvas very different from Flash, Silverlight, or SVG, which operate in retained mode. In this mode, a display list of objects is kept by the graphics renderer, and objects are displayed on the screen according to attributes set in code (i.e., the x position, y position, and alpha transparency of an object). This keeps the programmer away from low-level operations, but gives her less control over the final rendering of the bitmapped screen.
The basic HTML5 Canvas API includes a 2D context that allows a programmer to draw various shapes, render text, and display images directly onto a defined area of the browser window. You can apply colors; rotations; alpha transparencies; pixel manipulations; and various types of lines, curves, boxes, and fills to augment the shapes, text, and images you place onto the canvas.
Here’s where this book comes in. We are going to break down the Canvas API into digestible parts and then put it back together, demonstrating how to use it to create applications. Many of the techniques you will learn in this book have been tried and used successfully on other platforms, and now we are applying them to this exciting new technology.
HTML is the standard language used to construct pages on the World
Wide Web. We will not spend much time on HTML, but it does form the basis
<canvas>, so we cannot skip it
A basic HTML page is divided into sections, commonly
<body>. The new HTML5 specification adds a
few new sections, such as
<head> tag usually
contains information that will be used by the HTML
<body> tags to create the HTML page. It is
<head>, as you will see later when we
<canvas> tag. There
<body>, but we will make every attempt to
Basic HTML for a page might look like Example 1-1.
Example 1-1. A basic HTML page
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CH1EX1: Basic Hello World HTML Page</title> </head> <body> Hello World! </body> </html>
This tag informs the web browser to render the page in standards mode. According to the HTML5 spec from W3C, this is required for HTML5 documents. This tag simplifies a long history of oddities when it came to rendering HTML in different browsers. This should always be the first line of HTML in a document.
|Chinese – |
|French – |
|German – |
|Italian – |
|Japanese – |
|Korean – |
|Polish – |
|Russian – |
|Spanish (Castilian) – |
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.
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.
You should see something similar to Figure 1-1.
This is one of only two examples in this entire book that will work with Internet Explorer 8 or earlier.