Book Image

HTML5 Canvas Cookbook

By : Eric Rowell
Book Image

HTML5 Canvas Cookbook

By: Eric Rowell

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
HTML5 Canvas Cookbook
Eric Rowell
Nov, 2011 | 348 pages
No titles found
Table of Contents (19 chapters)
HTML5 Canvas Cookbook
HTML5 Canvas Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started withPaths and Text
Getting Started withPaths and Text
Introduction
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
2
Shape Drawing and Composites
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
3
Working with Images and Videos
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
4
Mastering Transformations
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
5
Bringing the Canvas to Life with Animation
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
6
Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
Introduction
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
7
Creating Graphs and Charts
Creating Graphs and Charts
Introduction
Creating a pie chart
Creating a bar chart
Graphing equations
Plotting data points with a line chart
8
Saving the World with Game Development
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
9
Introducing WebGL
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
Detecting Canvas Support
Detecting Canvas Support
Canvas fallback content
Canvas Security
Canvas Security
Additional Topics
Additional Topics
Canvas vs. CSS3 transitions and animations
Canvas performance on mobile devices
Index
Index

About the Reviewers

Kevin Roast is a frontend software developer with 12 years professional experience and a lifelong interest in computers and computer graphics. He has developed web software for several companies including his current employer Alfresco Software Ltd. He is very excited by the prospect of the HTML5 standardization of the Web, the progress of web-browser software in recent years and the bright future of HTML5 canvas development. He was co-author of a book called Professional Alfresco: Practical Solutions for Enterprise Content Management.

Rokesh Jankie graduated in 1998 with a Masters degree in Computer Science from Leiden University, The Netherlands. His field of specialization was Algorithms and NP-complete problems. Scheduling problems can be NP-complete and that's the area which he focused on. After that he started working for Leiden University, ORTEC Consultants, Ponte Vecchio and then Qualogy. At Qualogy, he used what he experienced so far to set up a product. Qualogy works in the field of Oracle and Java technology. With the current set of technologies, interesting products can be delivered, for example QAFE (see http://www.qafe.com for more info).

The company he works for now specializes in Oracle and Java technology. As the Head of the product development department his focus is on the future of web application development. They are using modern technologies (HTML5, Google APIs, GWT, Java) and have close contact with some excellent people at Google to make things work.

I'm very honored and grateful that I was contacted to review this book and to Shubhanjan Chatterjee for giving me the opportunity. It feels good to be part of the next big thing on the Web (HTML5) in this way. The future of web applications looks very promising.

Ian Pollock is an artist and educator. He holds a Master of Fine Arts in New Genre, and is currently completing a Master of Education in Instructional Design.

Since 1998, Ian has been teaching undergraduate and graduate classes in the US and the Middle East in media fine arts, web and graphic design, photography, as well as audio and video production.

His other experience includes building industry advisory boards, facilitating quality assurance procedures in academic programs, and coordinating system-wide learning objectives and curriculum alignment for courses across 11 campuses.

He currently advises as the director for education and social engagement at Illume Magazine Foundation.

His interests include digital media, fine art, citizen journalism, activism, social learning strategies, connectivist learning, social capacity building, web design and development, ux/uix, video and audio production, government 2.0, education 2.0, and curriculum development.

Ian currently teaches at the University of San Francisco and the CSU Eastbay.

I would like to extend my gratitude to Robert Frager, Ramona Manhein, and Kemal Guler, and all my loving friends, without whose care and support it would be difficult to accomplish anything in this world. I would also like to thank my students, who have forced me to become a deeper thinker and a more caring educator, and whose enthusiasm for art and technology inspires me every day.

Denis Samoilov is a web developer at HeBS Digital. Denis lives in Tallinn, Estonia with his girlfriend Natasha. He got involved in web development and design about ten years ago working on small projects. After finishing high school he decided to study Informatics in Tallinn Technical University. For two years, he has been working as sqa engineer, after that he tried himself as web designer, but found that web development is more interesting area for him.

I would like to thank my girlfriend Natasha for her support on those busy evenings and always being able to put a smile on my face, my colleagues Vladimir Sobolev for invaluable advices and Tim Sklyarov for providing designs of the most interesting award wining and challenging projects, Shubhanjan Chatterjee for providing me opportunity to review this book, also I would like to thank my parents, because without them I wouldn't be where I am today.

Alika Jain has extensive experience in the design and development of web applications for industries. She is skilled in frontend programming.

She has sound knowledge of technologies including HTML, XHTML, CSS, jQuery, JavaScript, and the Creative Adobe Suite.

I couldn't do this without the support of my family, but it is two special people's time to shine—Gulshan Modi (my father) and Parveen Jain (my husband).

Previous Section
Next Chapter