Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

502 CHAPTER 12 Drawing with HTML5

Lesson review

Answer the following questions to test your knowledge of the information in this lesson. You

can find the answers to these questions and explanations of why each answer choice is correct

or incorrect in the “Answers” section at the end of this chapter.

1. The content of the
   A. SGML
   B. HTML
   C. XHMTL
   D. XML


2. On the
   zoom capabilities?
   A. zoom
   B. window
   C. viewBox
   D. zoomWindow

Practice exercises

If you encounter a problem completing any of these exercises, the completed projects can be

installed from the Practice Exercises folder that is provided with the companion content.

Exercise 1: Create a webpage by using a canvas

In this exercise, you apply your knowledge of the <canvas> element by creating a web appli-

cation that enables you to take snapshots of a video as it plays.

1. Start Visual Studio Express 2012 for Web. Create an ASP.NET Empty Web Application
   project called CanvasSnapshooter.


2. After the project is created, add a new folder, called Media, to the project.


3. Add the IceBoat.mp4 video file. Right-click the Media folder, choose Add, and select
   Existing Item. Locate the Resource folder and select the IceBoat.mp4 video file.


4. Add an HTML file to the project. Name the file CanvasPage.html.


5. Add a CSS file to the project. Name the file default.css.


6. Add a new folder, called Scripts, to the project.


7. Right-click the Scripts folder and add a new JavaScript file, called default.js.


8. Add a reference to the jQuery library by right-clicking the project node. Choose
   Manage NuGet Packages. Click Online and type jQuery in the search criteria. When
   the jQuery library is displayed, click the Install button.