HTML5 Canvas Cookbook

What's HTML5 Canvas?

HTML5 Canvas is a part of the new HTML5 spec that enables web developers to create stunning graphics on the web with JavaScript.

HTML5 Canvas Cookbook

HTML5 Canvas Cookbook by Packt explores all of the new possibilities that canvas brings to the web by providing step by step recipes that are designed to get you up to speed with HTML5 Canvas.

Chapters

1. Getting started with paths and text
2. Shape drawing and composites
3. Working with images and video
4. Mastering transformations
5. Bringing the canvas to life with animation
6. Interacting with the canvas
7. Creating graphs and charts
8. Saving the world with game development
9. Creating 3D models and worlds with WebGL

About the Author

Eric Rowell is a professional front-end web developer and entrepreneur who is fascinated with the web industry, business, technology, and how they fit together. He's the founder and chief editor of Html5CanvasTutorials.com, an HTML5 canvas resource that's designed to complement the recipes in this book, and is also the creator of the KineticJS library, a lightweight JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. If you're feeling social, you can follow him on Twitter at @ericdrowell.

HTML5 Canvas Cookbook [Paperback]

Eric Rowell (Author)

Packt Publishing

Buy new: $36.35

Resources

Here are all of the resources for HTML5 Canvas Cookbook. If you don't have the book yet, it's okay! Feel free to look around and see what it's all about!

Introduction
1. Getting Started with Paths and Text
- Drawing a line
  - index.html
- Drawing an arc
  - index.html
- Drawing a quadratic curve
  - index.html
- Drawing a Bezier curve
  - index.html
- Drawing a zig-zag
  - index.html
- Drawing a spiral
  - index.html
- Working with text
  - index.html
- Drawing 3d text with shadows
  - index.html
- Unlocking the power of fractals: drawing a haunted tree
  - index.html
2. Shape Drawing and Composites
- Drawing a rectangle
  - index.html
- Drawing a circle
  - index.html
- Working with custom shapes and fill styles
  - index.html
- Fun with Bezier curves: drawing a cloud
  - index.html
- Drawing transparent shapes
  - index.html
- Working with the context state stack to save and restore styles
  - index.html
- Working with composite operations
  - index.html
- Creating patterns with loops: drawing a gear
  - index.html
- Randomizing shape properties: drawing a field of flowers
  - index.html
- Creating custom shape functions: playing card suits
  - index.html
- Putting it all together: drawing a jet
  - index.html
3. Working with Images and Videos
- Drawing an image
  - jet_300x214.jpg
  - index.html
- Cropping an image
  - jet_1000x714.jpg
  - index.html
- Copying and pasting sections of the canvas
  - index.html
- Working with video
- Getting image data
  - jet_300x214.jpg
  - index.html
- Introduction to pixel manipulation: inverting image colors
  - jet_300x214.jpg
  - index.html
- Inverting video colors
- Converting image colors to grayscale
  - jet_300x214.jpg
  - index.html
- Converting a canvas drawing into a data URL
  - index.html
- Saving a canvas drawing as an image
  - index.html
- Loading the canvas with a data URL
  - dataURL.txt
  - index.html
- Creating a pixelated image focus
  - jet_300x214.jpg
  - index.html
4. Mastering Transformations
- Translating the canvas context
  - index.html
- Rotating the canvas context
  - index.html
- Scaling the canvas context
  - index.html
- Creating a mirror transform
  - index.html
- Creating custom transforms
  - index.html
- Shearing the canvas context
  - index.html
- Handling multiple transforms with the state stack
  - index.html
- Transforming a circle into an oval
  - index.html
- Rotating an image
  - jet_300x214.jpg
  - index.html
- Drawing a simple logo and randomizing its position, rotation, and scale
  - index.html
5. Bringing the Canvas to Life with Animation
- Creating an animation class
  - animation.js
- Creating a linear motion
  - animation.js
  - index.html
- Creating an acceleration
  - animation.js
  - index.html
- Creating an oscillation
  - animation.js
  - index.html
- Oscillating a bubble
  - animation.js
  - index.html
- Swinging a pendulum
  - animation.js
  - index.html
- Animating mechanical gears
  - animation.js
  - index.html
- Animating a clock
  - animation.js
  - index.html
- Simulating particle physics
  - animation.js
  - index.html
- Creating microscopic life forms
  - animation.js
  - index.html
- Stressing the canvas and displaying the FPS
  - animation.js
  - index.html
6. Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
- Creating an Events class
  - events.js
- Working with canvas mouse coordinates
  - events.js
  - index.html
- Attaching mouse event listeners to regions
  - events.js
  - index.html
- Attaching touch event listeners to regions on a mobile device
  - events.js
  - index.html
- Attaching event listeners to images
- Dragging-and-dropping shapes
  - events.js
  - index.html
- Dragging-and-dropping images
- Creating an image magnifier
- Creating a drawing application
  - events.js
  - index.html
7. Creating Graphs and Charts
- Creating a pie chart
  - index.html
- Creating a bar chart
  - index.html
- Graphing equations
  - index.html
- Plotting data points with a line chart
  - index.html
8. Saving the World with Game Development
- Creating sprite sheets for the hero and enemies
- Creating level images and boundary maps
- Creating an Actor class for the hero and enemies
  - Actor.js
- Creating a Level class
  - Level.js
- Creating a HealthBar class
  - HealthBar.js
- Creating a Controller class
  - Controller.js
- Creating a Model class
  - Model.js
- Creating a View class
- Setting up the HTML docment and starting the game
  - index.html (play Canvas Hero)
9. Introducing WebGL
- Creating a WebGL wrapper to simplify the WebGL API
  - WebGL.js
- 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
Appendix
- Canvas Fallback Content
  - index.html
- Canvas Support Detection
  - index.html
  - index.html (2)
- Canvas Security
- Canvas vs. CSS3 Transitions and Animations
- Canvas Performance on Mobile Devices
Additional Resources