HTML5 Canvas Cookbook

HTML5 Canvas Cookbook

By : Eric Rowell

Buy this Book

HTML5 Canvas Cookbook

By: Eric Rowell

Buy this Book

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.

HTML5 Canvas Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Getting Started withPaths and Text

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

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

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

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

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

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

Creating Graphs and Charts

Plotting data points with a line chart

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

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

Canvas fallback content

Canvas Security

Additional Topics

Canvas vs. CSS3 transitions and animations

Canvas performance on mobile devices

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Appendix B. Canvas Security

In order to protect pixel data of images, videos, and canvases on your website, the HTML5 canvas specification has safeguards in place to prevent scripts from other domains from accessing these media, manipulating them, and then creating new images, videos, or canvases.

Before anything is drawn on the canvas, the canvas tag has an origin-clean flag that's set to true. This basically means that the canvas is "clean". If you draw an image onto the canvas that's hosted on the same domain as the code running it, the origin-clean flag remains true. If, however, you draw an image onto the canvas that's hosted on another domain, the origin-clean flag is set to false and the canvas is now "dirty".

According to the HTML5 canvas specification, the canvas is considered dirty the moment any of these actions occur:

The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.
The element's 2D context's drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.
The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.
The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.
The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.
The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.
The element's 2D context's fillText() or strokeText() methods are invoked and consider using a font that has an origin that is not the same as that of the Document object that owns the canvas element. (The font doesn't even have to be used; all that matters is whether the font was considered for any of the glyphs drawn.)

In addition, if you perform any of these actions on your local computer (not a web server), the origin-clean flag will automatically be set to false because the resources will be perceived to have come from a different origin.

Next, according to the specification, a SECURITY_ERR exception will be thrown if any of these actions occur with a dirty canvas:

The toDataURL() method is called
The getImageData() method is called
The measureText() method is used with a font whose origin is not the same as the Document object

Although the canvas security specification was created with good intentions, it may cause us more of a headache than it's worth. As an example, let's say that you wanted to create a drawing application that hooks into the Flickr API to pull in images from the public domain to add to your drawings. If you wanted your application to be able to save that drawing as an image using the toDataURL() method , or if you wanted your application to have fancy pixel manipulation algorithms using the getImageData() method , you're in some trouble. Performing these actions on a dirty canvas will throw a JavaScript error and prevent your application from working correctly.

One way to circumvent this problem is by creating a proxy that obtains images from another domain and then passes it back to the client, making it look as if the image came from your domain. If you've ever worked with cross-domain AJAX applications, you'll feel right at home.

HTML5 Canvas Cookbook

By : Eric Rowell

HTML5 Canvas Cookbook

By: Eric Rowell

Overview of this book

Related Content you might be interested in

Current Title:

HTML5 Canvas Cookbook

Appendix B. Canvas Security