O'Reilly logo

Teach Yourself Visually™ HTML5 by Mike Wooldridge

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

image

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required