HTML5 Canvas Cookbook

Preface 1
What this book covers 1
What you need for this book 3
Who this book is for 3
What is HTML5 Canvas 3
Chapter 1: Getting Started with Paths and Text 7
Introduction 7
Drawing a line 8
Drawing an arc 11
Drawing a Quadratic curve 13
Drawing a Bezier curve 15
Drawing a zigzag 16
Drawing a spiral 18
Working with text 20
Drawing 3D text with shadows 22
Unlocking the power of fractals: Drawing a haunted tree 24
Chapter 2: Shape Drawing and Composites 27
Introduction 27
Drawing a rectangle 28
Drawing a circle 30
Working with custom shapes and fill styles 32
Fun with Bezier curves: drawing a cloud 35
Drawing transparent shapes 37
Working with the context state stack to save and restore styles 38
Working with composite operations 41
Creating patterns with loops: drawing a gear 47
Randomizing shape properties: drawing a field of flowers 50
Creating custom shape functions: playing card suits 53
Putting it all together: drawing a jet 59

Chapter 3: Working with Images and Videos 67
Introduction 67
Drawing an image 68
Cropping an image 69
Copying and pasting sections of the canvas 72
Working with video 74
Getting image data 76
Introduction to pixel manipulation: inverting image colors 79
Inverting video colors 81
Converting image colors to grayscale 83
Converting a canvas drawing into a data URL 85
Saving a canvas drawing as an image 87
Loading the canvas with a data URL 89
Creating a pixelated image focus 90
Chapter 4: Mastering Transformations 95
Introduction 95
Translating the canvas context 96
Rotating the canvas context 97
Scaling the canvas context 99
Creating a mirror transform 101
Creating a custom transform 102
Shearing the canvas context 104
Handling multiple transforms with the state stack 106
Transforming a circle into an oval 108
Rotating an image 110
Drawing a simple logo and randomizing its position, rotation, and scale 112
Chapter 5: Bringing the Canvas to Life with Animation 115
Introduction 115
Creating an Animation class 116
Creating a linear motion 120
Creating acceleration 122
Creating oscillation 125
Oscillating a bubble 127
Swinging a pendulum 130
Animating mechanical gears 133
Animating a clock 138
Simulating particle physics 142
Creating microscopic life forms 146
Stressing the canvas and displaying the FPS 151