You are previewing HTML5 Canvas Cookbook.
O'Reilly logo
HTML5 Canvas Cookbook

Book Description

"

Over 80 recipes to revolutionize the Web experience with HTML5 Canvas with this book and ebook

  • 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

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 for the first time without Flash. HTML5 Canvas is being considered as the future of graphics and interactivity on the Web and yet most developers fail to exercise all of the features that this powerful technology has to offer.

HTML5 Canvas Cookbook covers the fundamental methods and properties of the HTML5 canvas API. As soon as you are familiar with the API, the book provides advanced techniques for handling animations, image and video manipulations, canvas interactivity, data visualizations, game development, 3D modeling, and more.

HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then provides techniques for handling features not directly supported by the API such as animations 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, principles of animation, physics, color models, matrix mathematics, and 3D projection.

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.

"

Table of Contents

  1. HTML5 Canvas Cookbook
    1. Table of Contents
    2. HTML5 Canvas Cookbook
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. What is HTML5 Canvas
      5. Conventions
      6. Reader feedback
      7. Customer support
        1. Downloading the example code for this book
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started withPaths and Text
      1. Introduction
      2. Drawing a line
        1. How to do it...
      3. How it works...
      4. There's more...
      5. See also...
      6. Drawing an arc
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      7. Drawing a Quadratic curve
        1. How to do it...
        2. How it works...
        3. See also...
      8. Drawing a Bezier curve
        1. How to do it...
        2. How it works...
        3. See also...
      9. Drawing a zigzag
        1. How to do it...
        2. How it works...
          1. Line join styles
      10. Drawing a spiral
        1. How to do it...
        2. How it works...
      11. Working with text
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      12. Drawing 3D text with shadows
        1. How to do it...
        2. How it works...
      13. Unlocking the power of fractals: Drawing a haunted tree
        1. How to do it...
        2. How it works...
        3. There's more...
    9. 2. Shape Drawing and Composites
      1. Introduction
      2. Drawing a rectangle
        1. How to do it...
        2. How it works...
        3. There's more...
          1. The fillRect() method
          2. The strokeRect() method
        4. See also...
      3. Drawing a circle
        1. How to do it...
        2. How it works...
        3. See also...
      4. Working with custom shapes and fill styles
        1. How to do it...
        2. How it works...
        3. See also...
      5. Fun with Bezier curves: drawing a cloud
        1. How to do it...
        2. How it works...
      6. Drawing transparent shapes
        1. How to do it...
        2. How it works...
      7. Working with the context state stack to save and restore styles
        1. Getting ready...
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also...
      8. Working with composite operations
        1. Getting ready...
        2. How to do it...
        3. How it works...
      9. Creating patterns with loops: drawing a gear
        1. How to do it...
        2. How it works...
        3. See also...
      10. Randomizing shape properties: drawing a field of flowers
        1. How to do it...
        2. How it works...
      11. Creating custom shape functions: playing card suits
        1. How to do it...
        2. How it works...
      12. Putting it all together: drawing a jet
        1. How to do it...
        2. How it works...
    10. 3. Working with Images and Videos
      1. Introduction
      2. Drawing an image
        1. How to do it...
        2. How it works...
        3. There's more...
      3. Cropping an image
        1. How to do it...
        2. How it works...
      4. Copying and pasting sections of the canvas
        1. How to do it...
        2. How it works...
      5. Working with video
        1. Getting ready...
        2. How to do it...
        3. How it works...
      6. Getting image data
        1. Getting ready...
        2. How to do it...
        3. How it works...
      7. Introduction to pixel manipulation: inverting image colors
        1. How to do it...
        2. How it works...
      8. Inverting video colors
        1. How to do it...
        2. How it works...
      9. Converting image colors to grayscale
        1. How to do it...
        2. How it works...
      10. Converting a canvas drawing into a data URL
        1. How to do it...
        2. How it works...
      11. Saving a canvas drawing as an image
        1. How to do it...
        2. How it works...
      12. Loading the canvas with a data URL
        1. How to do it...
        2. How it works...
      13. Creating a pixelated image focus
        1. How to do it...
        2. How it works...
    11. 4. Mastering Transformations
      1. Introduction
      2. Translating the canvas context
        1. How to do it...
        2. How it works...
      3. Rotating the canvas context
        1. How to do it...
        2. How it works...
        3. See also...
      4. Scaling the canvas context
        1. How to do it...
        2. How it works...
        3. See also...
      5. Creating a mirror transform
        1. How to do it...
        2. How it works...
      6. Creating a custom transform
        1. How to do it...
        2. How it works...
        3. There's more...
      7. Shearing the canvas context
        1. How to do it...
        2. How it works...
      8. Handling multiple transforms with the state stack
        1. How to do it...
        2. How it works...
      9. Transforming a circle into an oval
        1. How to do it...
        2. How it works...
        3. See also...
      10. Rotating an image
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      11. Drawing a simple logo and randomizing its position, rotation, and scale
        1. How to do it...
        2. How it works...
    12. 5. Bringing the Canvas to Life with Animation
      1. Introduction
      2. Creating an Animation class
        1. Getting ready...
        2. How to do it...
        3. How it works...
      3. Creating a linear motion
        1. How to do it...
        2. How it works...
        3. See also...
      4. Creating acceleration
        1. How to do it...
        2. How it works...
        3. See also...
      5. Creating oscillation
        1. How to do it...
        2. How it works...
        3. See also...
      6. Oscillating a bubble
        1. How to do it...
        2. How it works...
        3. See also...
      7. Swinging a pendulum
        1. How to do it...
        2. How it works...
        3. See also...
      8. Animating mechanical gears
        1. How to do it...
        2. How it works...
        3. See also...
      9. Animating a clock
        1. How to do it...
        2. How it works...
        3. See also...
      10. Simulating particle physics
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      11. Creating microscopic life forms
        1. How to do it...
        2. How it works...
        3. See also...
      12. Stressing the canvas and displaying the FPS
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
    13. 6. Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
      1. Introduction
      2. Creating an Events class
        1. How to do it...
        2. How it works...
      3. Working with canvas mouse coordinates
        1. How to do it...
        2. How it works...
      4. Attaching mouse event listeners to regions
        1. How to do it...
        2. How it works...
        3. See also...
      5. Attaching touch event listeners to regions on a mobile device
        1. How to do it...
        2. How it works...
        3. See also...
      6. Attaching event listeners to images
        1. How to do it...
        2. How it works...
        3. See also...
      7. Dragging-and-dropping shapes
        1. How to do it...
        2. How it works...
        3. See also...
      8. Dragging-and-dropping images
        1. How to do it...
        2. How it works...
        3. See also...
      9. Creating an image magnifier
        1. How to do it...
        2. How it works...
        3. See also...
      10. Creating a drawing application
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
    14. 7. Creating Graphs and Charts
      1. Introduction
      2. Creating a pie chart
        1. How to do it...
        2. See also...
        3. How it works...
      3. Creating a bar chart
        1. How to do it...
        2. How it works...
        3. See also...
      4. Graphing equations
        1. How to do it...
        2. How it works...
        3. See also...
      5. Plotting data points with a line chart
        1. How to do it...
        2. How it works...
        3. See also...
    15. 8. Saving the World with Game Development
      1. Introduction
      2. Creating sprite sheets for the heroes and enemies
        1. Getting ready...
        2. How to do it
      3. Creating level images and boundary maps
        1. How to do it...
        2. How it works...
        3. There's more...
          1. Boundary map alternative
          2. Level image alternatives
      4. Creating an Actor class for the hero and enemies
        1. How to do it...
          1. How it works...
        2. See also...
      5. Creating a Level class
        1. How to do it...
        2. How it works...
        3. See also...
      6. Creating a Health Bar class
        1. How to do it...
        2. How it works...
      7. Creating a Controller class
        1. How to do it...
        2. How it works...
      8. Creating a Model class
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      9. Creating a View class
        1. How to do it...
        2. How it works...
        3. See also...
      10. Setting up the HTML document and starting the game
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
    16. 9. Introducing WebGL
      1. Introduction
      2. Creating a WebGL wrapper to simplify the WebGL API
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      3. Creating a triangular plane
        1. How to do it...
        2. How it works...
      4. Rotating a triangular plane in 3D space
        1. How to do it...
        2. How it works...
        3. See also...
      5. Creating a rotating cube
        1. How to do it...
        2. How it works...
        3. See also...
      6. Adding textures and lighting
        1. How to do it...
        2. How it works...
        3. See also...
      7. Creating a 3D world that you can explore
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
    17. A. Detecting Canvas Support
      1. Canvas fallback content
        1. Detecting available WebGL contexts
    18. B. Canvas Security
    19. C. Additional Topics
      1. Canvas vs. CSS3 transitions and animations
      2. Canvas performance on mobile devices
    20. Index