PacktLib: HTML5 Canvas Cookbook

HTML5 Canvas Cookbook


About the Author

About the Reviewers


Getting Started withPaths and Text


Drawing a line

How it works...

There's more...

See also...

Drawing an arc

Drawing a Quadratic curve

Drawing a Bezier curve

Drawing a zigzag

Drawing a spiral

Working with text

Drawing 3D text with shadows

Unlocking the power of fractals: Drawing a haunted tree

Shape Drawing and Composites


Drawing a rectangle

Drawing a circle

Working with custom shapes and fill styles

Fun with Bezier curves: drawing a cloud

Drawing transparent shapes

Working with the context state stack to save and restore styles

Working with composite operations

Creating patterns with loops: drawing a gear

Randomizing shape properties: drawing a field of flowers

Creating custom shape functions: playing card suits

Putting it all together: drawing a jet

Working with Images and Videos


Drawing an image

Cropping an image

Copying and pasting sections of the canvas

Working with video

Getting image data

Introduction to pixel manipulation: inverting image colors

Inverting video colors

Converting image colors to grayscale

Converting a canvas drawing into a data URL

Saving a canvas drawing as an image

Loading the canvas with a data URL

Creating a pixelated image focus

Mastering Transformations


Translating the canvas context

Rotating the canvas context

Scaling the canvas context

Creating a mirror transform

Creating a custom transform

Shearing the canvas context

Handling multiple transforms with the state stack

Transforming a circle into an oval

Rotating an image

Drawing a simple logo and randomizing its position, rotation, and scale

Bringing the Canvas to Life with Animation


Creating an Animation class

Creating a linear motion

Creating acceleration

Creating oscillation

Oscillating a bubble

Swinging a pendulum

Animating mechanical gears

Animating a clock

Simulating particle physics

Creating microscopic life forms

Stressing the canvas and displaying the FPS

Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions


Creating an Events class

Working with canvas mouse coordinates

Attaching mouse event listeners to regions

Attaching touch event listeners to regions on a mobile device

Attaching event listeners to images

Dragging-and-dropping shapes

Dragging-and-dropping images

Creating an image magnifier

Creating a drawing application

Creating Graphs and Charts


Creating a pie chart

Creating a bar chart

Graphing equations

Plotting data points with a line chart

Saving the World with Game Development


Creating sprite sheets for the heroes and enemies

Creating level images and boundary maps

Creating an Actor class for the hero and enemies

Creating a Level class

Creating a Health Bar class

Creating a Controller class

Creating a Model class

Creating a View class

Setting up the HTML document and starting the game

Introducing WebGL


Creating a WebGL wrapper to simplify the WebGL API

Creating a triangular plane

Rotating a triangular plane in 3D space

Creating a rotating cube

Adding textures and lighting

Creating a 3D world that you can explore

Detecting Canvas Support

Detecting Canvas Support

Canvas Security

Additional Topics

Additional Topics

Additional Topics