Section 2.6 Canvas in HTML5

Learning Objectives

After you have completed this section, you should be able to

• draw various lines and shapes on your web pages for web applications.
• manipulate various lines and shapes in different ways for your needs.
• create an HTML5 canvas-based game or similar web applications with sound and collision detection capabilities.

Activities

• Carefully read the learning objectives.
• Watch the presentation for the section;
• Read Chapter 14, HTML5: Introduction to canvas.
• Find answers to the study questions below.
• Do exercises 14.10, 14.11, 14. 17, 14.22, 14.25, 14.36, and 14.53 in Chapter 14.

Study Questions

1. What is an HTML5 canvas?
2. What is the canvas element in HTML5?
3. What is the canvas coordinate system used in HTML5?
4. How are the units in the canvas coordinate system measured?
5. How do you create a new canvas in HTML5?
6. How do you draw a rectangle on an HTML5 canvas?
7. How do you draw lines, arcs, and circles?
8. How do you draw shadows in HTML5?
9. How do you draw quadratic curves and Bezier curves in HTML5?
10. How do you draw linear gradients in a canvas?
11. How do you draw radial gradients in a canvas?
12. How do you draw an image to a canvas?
13. How can you manipulate an image drawn on a canvas?
14. How do you draw patters on a canvas?
15. How do you scale and translate a shape?
16. How do you rotate a shape to create an animation?
17. What can you do with the transform method?
18. How do you draw text on a canvas?
19. How do you re-size a canvas to fit a browser window?
20. What is alpha transparency? How do you do it?
21. How do you control the layering of shapes and images drawn on a canvas?
22. What are the differences between HTML5 canvas and scalable vector graphics (SVG)?

Review

Do the self-review exercises for Chapter 14.

Summary

Read the Chapter 14 summary.