Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword or section
Like this
2Activity

Table Of Contents

About Canvas
At a Glance
You Can Add a Canvas Element in a Few Lines of Code
It’s Easy to Include JPEGs, GIFs, PNGs, and SVGs
You Can Also Render Text On Canvas
Canvas is Great for Infographics
Canvas Can Create Fast, Lightweight Animations
You Can Manipulate Pixels Directly for Image Processing
Make Games That Play on the Desktop and iOS-Based Devices
The Web Inspector Provides Built-In JavaScript Debugging
Export to Canvas is Possible from Illustrator or Flash
Prerequisites
See Also
Start by Adding a <canvas> Tag
Specify the Fallback Behavior
Create a Drawing Context
Setting Up the Canvas
Save and Restore the Context
Set the Stroke and Fill Styles
Drawing Lines and Shapes
Drawing Rectangles
Paths and Subpaths
Drawing Lines
Drawing Arcs and Circles
Drawing Complex Shapes
Creating Masks
Gradients
Linear Gradients
Gradients and Patterns
Listing 3-1 Creating a linear gradient
Radial Gradients
Animating Gradients
Patterns
Image Sources
Using Predrawn Images
Preparing to Draw an Image
Drawing an Image Normally
Drawing an Image with a Given Height and Width
Drawing an Image with Region Mapping
Text Settings
Adding Text
Font Settings
Text Direction
Text Alignment
Text Baseline
Bounding Box Width
Drawing Text
Listing 5-1 Drawing “Hello, world.”
Animating Text
Shadow Basics
Adding Shadows
Transparency and Blur
Figure 6-2 Shadow hardness
Shadows and Animation
Translation, Rotation, and Scaling
Translation
Listing 7-1 Drawing a path at a new location
Figure 7-1 Translating a path
Scaling
Rotation
Listing 7-2 Rotating an image and text
Rotation Around the Center
Combining Asymmetric Scaling and Rotation
Setting the Transformation Matrix
Matrix Transforms
Example: Setting the Matrix for Reflection
Figure 8-3 Reflection with scale and gradient
Listing 8-2 Adding a scalar and gradient
The Identity Matrix
Transforming the Transformation Matrix
Global Alpha
Advanced Compositing
Compositing Modes
Scaling Your Data
Creating Charts and Graphs
Scaling Using the Transformation Matrix
Scaling Using a Function
Data Plots
Listing 10-3 Data plot template
Bar Graphs
Figure 10-2 Sample bar graph
Pie Charts
Listing 10-6 Pie chart generator
Interactive Data Visualization and Animation
Listing 10-7 Performing interactive frequency addition
The Animation Sequence
Animating the Canvas
Animation Timing
Figure 11-1 Animation profile
A Simple Animation
Listing 11-1 Creating a simple animation
Adding a Gradient
Intermittent Animation
Listing 11-2 Creating an intermittent animation
Panning Background
Simple Panning Background
Layered Panning Background
Listing 11-4 Adding a layered panning background
<title>Layered Panning Background</title>
Assigning a Border and Background
Listing 12-1 Adding a CSS background and border
Modifying the Canvas with CSS
A Pop-Up Canvas—Animating Position and Opacity
Free Range Canvas
Using Standard Inputs with Canvas
Adding Mouse and Touch Controls to Canvas
Using Standard Inputs on Canvas
Responding to Mouse and Touch Events on Canvas
Tracking a Single Touch
Tracking Multiple Touches and Testing for Hits
Listing 13-4 Track multiple touches
Creating Custom Canvas Controls
Adding a Custom Button
Figure 13-5 Clicking a custom button
Listing 13-5 Creating a custom button on canvas
Adding a Slider
Listing 13-6 Adding a slider using CSS
Adding Sound to Canvas Animations
Adding a Soundtrack
Looping Audio
Listing 14-2 Adding looping audio
Adding a Voice-Over
Listing 14-3 Displaying slides with voice-overs
Adding Sound Effects
Listing 14-4 Creating animation with sound effects
Getting Pixel Data From the Canvas
Creating Buffer Objects
Pixel Manipulation
Modifying Pixel Data
Example: Reading and Modifying Pixel Data
Figure 15-1 Green clear and restore
Collision Detection
Space Arcade Game
Creating Games
Loony Lander Game
Putting Video on Canvas
Canvas Over Video
Listing 17-1 Displaying video behind the canvas
Tiled Video
Listing 17-2 Breaking video into tiles
Image Processing
Document Revision History
0 of .
Results for:
No results containing your search query
P. 1
HTML Canvas Guide

HTML Canvas Guide

Ratings: (0)|Views: 3,665|Likes:
Published by Paul McKellar

More info:

Published by: Paul McKellar on Apr 26, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

04/26/2012

pdf

text

original

You're Reading a Free Preview
Pages 4 to 21 are not shown in this preview.
You're Reading a Free Preview
Pages 24 to 204 are not shown in this preview.

Activity (2)

You've already reviewed this. Edit your review.
1 thousand reads
1 hundred reads

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->