Free Sample
+ Collection

HTML5 Canvas Cookbook

Eric Rowell

Over 80 recipes to revolutionize the Web experience with HTML5 Canvas with this book and ebook
RRP $23.99
RRP $39.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849691369
Paperback348 pages

About This Book

  • The quickest way to get up to speed with HTML5 Canvas application and game development
  • Create stunning 3D visualizations and games without Flash
  • Written in a modern, unobtrusive, and objected oriented JavaScript style so that the code can be reused in your own applications.
  • Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible


Who This Book Is For

This book is geared towards web developers who are familiar with HTML and JavaScript. It is written for both beginners and seasoned HTML5 developers with a good working knowledge of JavaScript.

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: Creating Graphs and Charts
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
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
Chapter 9: 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

What You Will Learn

  • Learn about the fundamentals of line drawing, text drawing, shape drawing, composites, and picture drawing.
  • Work with images, video, and pixel manipulation.
  • Apply transformation effects including translations, scaling, rotations, and shearing.
  • Animate linear motions, accelerations, and oscillations, and create a particle physics simulator.
  • Extend the HTML5 Canvas API to support shape event handling for desktop and mobile applications.
  • Construct data visualizations with graphs and charts.
  • Develop your own HTML5 canvas games.
  • Create stunning 3D visualizations with WebGL.

In Detail

The HTML5 canvas is revolutionizing graphics and visualizations on the Web. Powered by JavaScript, the HTML5 Canvas API enables web developers to create visualizations and animations right in the browser without Flash. Although the HTML5 Canvas is quickly becoming the standard for online graphics and interactivity, many developers fail to exercise all of the features that this powerful technology has to offer.

The HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then progresses by providing advanced techniques for handling features not directly supported by the API such as animation and canvas interactivity. It winds up by providing detailed templates for a few of the most common HTML5 canvas applications—data visualization, game development, and 3D modeling. It will acquaint you with interesting topics such as fractals, animation, physics, color models, and matrix mathematics.

By the end of this book, you will have a solid understanding of the HTML5 Canvas API and a toolbox of techniques for creating any type of HTML5 Canvas application, limited only by the extent of your imagination.


Read More

Recommended for You