Canvas 2D Web Apps/HTML Web Apps

This chapter discusses the basic structure of a HTML web page that uses a single canvas element for rendering. The discussion includes the most important commands for rendering. Readers are assumed to be familiar with JavaScript (or ECMAScript).

An Example
The following HTML code uses a canvas element to draw some text and an image from Wikimedia Commons. You should use your favorite text editor to create a new file, copy and paste the code into it, and then save the file on your computer (preferably with the file extension “.html”). Then open the file with your favorite web browser. (Alternatively, it is also available online.) It should show the text "Hello, world!" on top of an HTML5 icon on top of a light blue background. Below we discuss the example in detail.

Debugging
If your web browser doesn't display the web page correctly, you should try to debug the web page using the web browser's developer tools and the list of error messages. Unfortunately, it depends on the browser how to open these tools; thus, you have to consult your web browser's documentation.

If you change the code, remember to save it before you reload the page in the web browser. Some browsers, however, might use a cached version instead of the new version with your changes. The safest way to deal with this problem is to save the new version under a new name and open this new file in the web browser.

Discussion
In this section, all the code of the example will be discussed in detail. The code starts with some HTML text:

This is just standard HTML code to start a web page. The  tag was included to avoid warnings about an unspecified character set.

The following part is the  element with the JavaScript code, which we skip for now. The last part is again HTML code:

The  tag specifies the content of the web page. The attribute  sets the background color to black (in case it is ever visible). The attribute  specifies that the web browser should execute the   function (which we discuss below) once the web page has been loaded. specifies that the  function (which we also discuss below) should be called whenever the browser window is resized.

In this web page, there is only a single  element in the body of the web page. The attributes  and   specify the width and height of the canvas element in CSS pixels (which might be different from physical device pixels; for example, a CSS pixel usually corresponds to 2×2 device pixels on the retina display of some iOS devices). However, the size of the canvas element can be changed in the JavaScript code as discussed below. The attribute  specifies an ID for the canvas element such that it can be identified in the JavaScript code. (This is particularly useful if there are multiple canvas elements.) Finally,  places the left, top corner of the canvas at the left, top corner of the web page without any margin, which is important if we want the canvas to fill the whole browser window.

In this example, the  element is empty, i.e. nothing is specified between   and. If there were any HTML elements between these tags, they would be displayed if rendering into the  element is not supported by the web browser.

The  element defines all the JavaScript code for this web page. The first part defines a global variable, which is initialized to a new, empty image, and the function  , which is called by the web browser once the body of the web page has been loaded (see above):

The line  specifies that the function   (see below) should be called once the image has been loaded. The next line  specifies the URL address from where the image should be loaded. The string can also specify the path name of an image file relative to the location of the HTML file.

The second function is called  as it updates the contents of the canvas element.

First, the canvas element is retrieved with  (see above for the definition of the ID of the canvas element) and assigned to the variable. For this canvas, a “canvas 2D context” is retrieved with  and assigned to the variable. All the rendering functions discussed in this wikibook use the 2D context.

The size of the 2D context is specified by the corresponding canvas. In this example, the lines  and   set the size of the canvas (and therefore of the 2D context) to the size of the browser window. Since the  function is called whenever the browser window is resized (see the discussion of the   element above), the canvas and its context are always set to the size of the browser window.

The line  clears the whole context to transparent black. (Changing the size of the canvas will usually also clear the context; thus, this line is often not necessary.)

The line  specifies the composite operation that is appropriate for rendering in front-to-back order; i.e., the front-most element (the one that occludes all other elements) is rendered first, then the element that occludes all but the front-most element, etc. Thus, the background has to be rendered last. This is the same order that is used for traditional reverse glass painting. Front-to-back rendering is somewhat unusual in computer graphics but we use it in this wikibook because it is consistent with the way in which we process mouse and touch events.

The line  specifies that the following commands should use black as fill color. specifies that the following commands should use a bold Helvetica font of size 48 pixels or the default sans-serif font if Helvetica is not available. The lines  and   set the vertical and horizontal alignment to centering; i.e., text will be centered around a specified anchor point. The line  then writes the string   with the center at x coordinate 170 and y coordinate 60 (the origin of the coordinate system is in the top, left corner of the canvas) using the font and fill color that have been specified in the previous lines.

The next line  draws the image   with its top, left corner at the x coordinate 10 and the y coordinate 20 and rescales it to a width of 50 pixels and a height of 51 pixels. If the last two arguments are skipped (i.e. for ), the original width and height of   would be used; thus, the image wouldn't be rescaled.

Similarly to one of the previous lines,  specifies a fill color; in this case it is light blue. (The red and green intensity is specified by C0, which is the hexadecimal code for the value 192, and the blue intensity is specified by FF, which is the hexadecimal code for the value 255, which is the maximum intensity.) The line  draws a filled rectangle with the top, left corner at x coordinate 0 and y coordinate 0 (which is the top, left corner of the canvas) of width   and height. Thus, the rectangle covers the whole canvas.

This concludes the discussion of the example. In order to get familiar with the code and the functions, you are strongly encouraged to play with it; for example, by changing colors and fonts, changing positions and sizes, replacing the image or adding additional images, rectangles, or text, etc.

More about Rendering
There are many more functions for rendering in a 2D context of the canvas element. They are all specified in the document “HTML Canvas 2D Context” by the World Wide Web Consortium (W3C). However, we are not going to discuss more of these functions in this wikibook for two reasons:
 * 1) For most prototypes of interactive web pages and web apps, the discussed functions are sufficient.
 * 2) If the final version of a web page or web app is designed by a professional web designer, he or she will usually prefer to create graphical elements as bitmap images, which can be rendered with the   function as discussed above.

Obviously, there are cases in which more rendering functions are useful and readers are encouraged to read the specification of the 2D context by the W3C in those cases.