HTML5 Canvas [267]
Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center
Scale Transformations
Combining Scale and Rotation Transformations
Filling Objects with Colors and Gradients
Setting Basic Fill Colors
Filling Shapes with Gradients
Linear gradients
Linear horizontal gradients
Applying a horizontal gradient to a stroke
Applying a horizontal gradient to a complex shape
Vertical gradients
Diagonal gradients
Radial gradients
Filling Shapes with Patterns
Creating Shadows on Canvas Shapes
What’s Next
3. The HTML5 Canvas Text API
Displaying Basic Text
Basic Text Display
Handling Basic Text in Text Arranger
Communicating Between HTML Forms and the Canvas
Using measureText
Centering text using width
What about the height of the text?
fillText and strokeText
Setting the Text Font
Font Size, Face Weight, and Style Basics
Handling Font Size and Face in Text Arranger
Available font styles
Available font weights
Generic font faces
Font size and HTML5 range control
Creating the necessary variables in the canvasApp() function
Setting event handlers in canvasApp()
Defining event handler functions in canvasApp()
Setting the font in the drawScreen() function
Font Color
Handling font color with JSColor
Font Baseline and Alignment
Vertical alignment
Horizontal alignment
Handling text baseline and alignment
Text Arranger Version 2.0
Text and the Canvas Context
Global Alpha and Text
Handling globalAlpha transparencies
Global Shadows and Text
Handling global shadows
Text with Gradients and Patterns
Linear Gradients and Text
Radial Gradients and Text
Image Patterns and Text
Handling Gradients and Patterns in Text Arranger
Width, Height, Scale, and toDataURL() Revisited
Dynamically Resizing the Canvas
Dynamically resizing in Text Arranger
Dynamically Scaling the Canvas
The toDataURL() Method of the Canvas Object
Final Version of Text Arranger
What’s Next
4. Images on the Canvas
The Basic File Setup for This Chapter
Image Basics
Preloading Images
Displaying an Image on the Canvas with drawImage()
Resizing an Image Painted to the Canvas
Copying Part of an Image to the Canvas
Simple Cell-Based Sprite Animation
Creating an Animation Frame Counter
Creating a Timer Loop
Changing the Tile to Display
Advanced Cell-Based Animation
Examining the Tile Sheet
Creating an Animation Array
Choosing the Tile to Display
Looping Through the Tiles
Drawing the Tile
Moving the Image Across the Canvas
Applying Rotation Transformations to an Image
Canvas Transformation Basics
Step 1: Save the current context to the stack
Step 2: Reset the transformation matrix to identity
Step 3: Code the transform algorithm
Step 4: Draw the image
Animating a Transformed Image
Creating a Grid of Tiles
Defining a Tile Map
Creating a Tile Map with Tiled
Displaying the Map on the Canvas
Map height and width
Storing the map data
Displaying the map on the canvas
Zooming and Panning an Image
Creating a Window for the Image
Drawing the Image Window
Panning the Image
Zoom and Pan the Image
Application: Controlled Pan and Zoom
The zoom scale
Keyboard input
Pixel Manipulation
The Canvas Pixel Manipulation API
ImageData attributes
Getting image data
Putting image data
Application Tile Stamper
How ImageData.data is organized
A visual look at our basic application
Adding mouse events to the canvas
The highlightTile() function
Copying from One Canvas to Another
What’s Next
5. Math, Physics, and Animation
Moving