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

Stressing the canvas and displaying the FPS

After seeing the last recipe, you might be thinking "Is there a limit to how many microbes we can animate?" The straightforward answer to this question is yes. As the 2D context of the HTML5 canvas is not hardware-accelerated, and as our animations are driven purely by JavaScript, there is definitely a point where the browser will start to choke if it's working overtime. To illustrate this, we can draw the FPS of our animation and observe the relationship between the number of microbes on the screen and the FPS value.

How to do it...

Follow these steps to stress the canvas and display the FPS:

Link to the Animation class:

<head>
    <script src="animation.js">
    </script>

Define the drawFps() function that draws the FPS value in the top-right corner of the canvas:

        function drawFps(anim, fps){
            var canvas = anim.getCanvas();
            var context = anim.getContext();
            
            context.fillStyle...

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

Stressing the canvas and displaying the FPS

How to do it...