Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

Chapter 1. Essentials > 1.8. Using HTML Elements in a Canvas - Pg. 36

36 Chapter 1 Essentials 1.8 Using HTML Elements in a Canvas Canvas is arguably the coolest feature of HTML5, but when you use it to imple- ment web applications, you will rarely use it alone. Most of the time you will combine one or more canvases with other HTML controls so that your users can provide input or otherwise control the application. To combine other HTML controls with your canvases, you may first be inclined to embed those controls inside your canvas elements, but that won't work, because anything you put in the body of a canvas element is displayed by the browser only if the browser does not support the canvas element. Because browsers will display either a canvas element or HTML controls that you put inside that element, but not both, you must place your controls outside of your canvas elements. To make it appear as though HTML controls are inside a canvas, you can use CSS to place the controls above the canvas. The application shown in Figure 1.16 illustrates that effect. Figure 1.16 HTML elements above a canvas