Internet & World Wide Web: How to Program, Fifth Edition

14. HTML5: Introduction to canvas

With every experience, you alone are painting your own canvas, thought by thought, choice by choice.

—Oprah Winfrey

Observe Everything. Communicate Well. Draw, Draw, Draw.

—Frank Thomas

Do not go where the path may lead, go instead where there is no path and leave a trail.

—Ralph Waldo Emerson

Objectives

In this chapter you’ll:

• Draw lines, rectangles, arcs, circles, ellipses and text.

• Draw gradients and shadows.

• Draw images, create patterns and convert a color image to black and white.

• Draw Bezier and quadratic curves.

• Rotate, scale and transform.

• Dynamically resize a canvas to fill the window.

• Use alpha transparency and compositing techniques.

• Create an HTML5 canvas-based game app with sound ...