HTML5 Canvas Cookbook

HTML5 Canvas Cookbook
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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


Book Details

Language : English
Paperback : 348 pages [ 235mm x 191mm ]
Release Date : November 2011
ISBN : 1849691363
ISBN 13 : 9781849691369
Author(s) : Eric Rowell
Topics and Technologies : All Books, Web Development, Cookbooks, Open Source, Web Development, Web Graphics & Video

Table of Contents

Chapter 1: Getting Started with Paths and Text
Chapter 2: Shape Drawing and Composites
Chapter 3: Working with Images and Videos
Chapter 4: Mastering Transformations
Chapter 5: Bringing the Canvas to Life with Animation
Chapter 6: Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
Chapter 7: Creating Graphs and Charts
Chapter 8: Saving the World with Game Development
Chapter 9: Introducing WebGL
Appendix A: Detecting Canvas Support
Appendix B: Canvas Security
Appendix C: Additional Topics
  • 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 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
          • 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 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
            • 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 image
            • Drawing 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 8: Saving the World with Game Development
                    • Introduction
                    • 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
                      • Introduction
                      • 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

                        Eric Rowell

                        Eric Rowell is a professional web developer and entrepreneur who’s fascinated with the web industry, business, technology, and how they fit together. He’s the founder and chief editor of, an HTML5 canvas resource that’s designed to complement the recipes in his book , and also the creator of the KineticJS library, a lightweight JavaScript library that extends the 2D canvas context by adding support for animations and region event handling. If you’re feeling social, you can follow him on Twitter at @ericdrowell.


                        Code Downloads

                        Download the code and support files for this book.

                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                        - 2 submitted: last submission 07 May 2014

                        Errata type: Typo | Page number: 76

                        we need to use the getImateData() method of the canvas context which will throw a SECURITY_ERR exception.

                        It should have been "getImageData()" and not "getImateData()".


                        Errata Type: Code related | Page no: 22


                        window.onload = function(){

                        canvas = document.getElementById("myCanvas");

                        context = canvas.getContext("2d");


                        Should be:

                        window.onload = function(){

                        var canvas = document.getElementById("myCanvas");

                        var context = canvas.getContext("2d");

                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        HTML5 Canvas Cookbook +    Bootstrap Site Blueprints =
                        50% Off
                        the second eBook
                        Price for both: ₨314.00

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • 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.


                        Written in cookbook style, this book offers a wide array of techniques for building HTML5 Canvas applications. Each recipe contains step-by-step instructions followed by analysis of what was done in each task and other useful information. The book is designed so that you can read it chapter by chapter, or you can look at the list of recipes and refer to them in no particular order.

                        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.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software