Teach Yourself Visually™ HTML5

CHAPTER 13

Adding Canvases

Want to draw shapes, lines, and words on your web pages, and add selected parts of images into the mix as well? The new HTML5 canvas enables you to combine all of these things. Canvases give you capabilities that previously you had to use your image editor for. This chapter teaches you how to set up a canvas and then draw on it using JavaScript code.

Understanding Canvases

Set Up a Canvas

Draw Rectangles

Draw Circles

Draw Lines

Add Text

Add an Image

Slice an Image

Add a Gradient

Rotate Canvas Content

Animate Canvas Content

Understanding Canvases

The <canvas> tag enables you to define a blank drawing area on your web ...