HTML5 canvas cookbook: over 80 recipes to revolutionize the web experience with HTML5 canvas 9781283349710, 128334971X, 9781849691376, 1849691371, 978-1-84969-136-9
Written in cookbook style, this book offers a wide array of techniques for building HTML5 Canvas applications. Each reci
641 26 5MB
English Pages 331 Year 2011
Table of contents :
Content: Cover
Copyright
Credits
About the Author
About the Reviewers
www.PacktPub.com
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
What is HTML5 Canvas
Chapter 1: Getting Started with Paths and Text
Introduction
Drawing a line
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
Chapter 2: Shape Drawing and Composites
Introduction
Drawing a rectangle
Drawing a circle Working with custom shapes and fill stylesFun 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
Chapter 3: Working with Images and Videos
Introduction
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 colorsInverting 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
Chapter 4: Mastering Transformations
Introduction
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 imageDrawing a simple logo and randomizing its position, rotation, and scale
Chapter 5: Bringing the Canvas to Life with Animation
Introduction
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
Chapter 6: Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
Introduction
Creating an Events class Working with canvas mouse coordinatesAttaching 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
Chapter 7: Creating Graphs and Charts
Introduction
Creating a pie chart
Creating a bar chart
Graphing equations
Plotting data points with a line chart
Chapter 8: Saving the World with Game Development
Introduction
Creating sprite sheets for the heroes and enemies
