HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 6

Creating Graphics with Canvas

In This Chapter

• Using canvas versus other methods

• Drawing with the canvas element

• Drawing paths and shapes

• Applying transformations to the canvas

• Modifying image data

THIS CHAPTER SHOWS you how to create dynamic graphics with the canvas element. It starts by giving you an overview of the ways in which you can display graphics and graphics on the web before diving into the canvas drawing API.

The meat of this chapter is all about how to use the canvas API. First, you walk through the basics of drawing simple shapes and paths and applying various styles to the content. You learn how to use the canvas state stack to your advantage and see how to mix images and text content with graphics on the canvas.

Then you learn how to use transformations to modify the way things are drawn and how to apply different compositing operations. Finally, the chapter rounds off the canvas tour by looking at how to use low-level pixel access to create some really interesting effects.

Ways to Display Graphics on the Web

In the past, all graphics on the web had to be represented by bitmap images in formats such as GIF or JPEG. More options for displaying graphics on the web are available today.

Bitmap images

Bitmaps are images defined by a rectangular grid of pixels. The traditional formats used on the web—JPEG, PNG, and GIF—are all bitmap formats. Bitmaps are perfectly adequate for many purposes. In some cases, such as displaying photos, they are the ...