HTML5 Canvas Cookbook

Over 80 recipes to revolutionize the Web experience with HTML5 Canvas

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

What you will learn from this book

• Learn about the fundamentals of line drawing, text drawing, shape drawing, composites, and picture drawing.
• Animate linear motions, accelerations, and oscillations, and create a particle physics simulator.
• Work with images, video, and pixel manipulation.
• Apply transformation effects including translations, scaling, rotations, and shearing.
• Create interactive HTML5 canvas applications using mouse coordinate detection, pixel detection, rectangular region detection, and path detection techniques.
• Construct data visualizations with graphs and charts.
• Develop your own HTML5 canvas games.
• Create stunning 3D visualizations with JavaScript libraries and WebGL.

Approach

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 written 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 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