HOME BOOKS QUICK GUIDES VIDEO COURSES
NEWSLETTER CONTACT
Canvas API
JavaScript | HTML5
Learn how to create graphic applications for the Web with the Canvas API. After reading this guide, you will know how to create graphics for the web, how to manipulate images, and how to generate animations and small video games.
Only $ 2.99
Amazon
Apple
Google
Description
Quick Guides for Masterminds are excerpts from our best-selling books SwiftUI for Masterminds, UIKit for Masterminds, and HTML5 for Masterminds, providing a cost-effective alternative to getting the information you need.

With this guide, you will learn how to create graphic applications for the Web with the Canvas API. After reading this guide, you will know how to create graphics for the web, how to manipulate images, and how to generate animations and small video games.
Table of Contents
CANVAS API
Graphics
The Canvas
The Context
Drawing
Rectangles
Colors
Gradients
Paths
Lines
Text
Shadows
Transformations
Status
The GlobalCompositeOperation Property
Images
Patterns
Image Data
Cross-Origin
Extracting Data
Animations
Simple Animations
Professional Animations
Video
Real-Life Application
QUICK REFERENCE
Canvas
Lines
Text
Shadows
Transformations
Images
Examples
Download TXT Files

Listing 1: Including the <canvas> element
Listing 2: Getting the drawing context for the canvas
Listing 3: Drawing rectangles
Listing 4: Changing colors
Listing 5: Applying a linear gradient to the canvas
Listing 6: Starting and ending a path
Listing 7: Creating a path
Listing 8: Completing the triangle
Listing 9: Drawing a solid triangle
Listing 10: Using a triangle as a mask
Listing 11: Drawing circles with the arc() method
Listing 12: Drawing an arc of 45 degrees
Listing 13: Creating complex curves
Listing 14: Testing properties for lines
Listing 15: Drawing text
Listing 16: Measuring text
Listing 17: Applying shadows to text
Listing 18: Translating, rotating and scaling
Listing 19: Cumulative transformation of the matrix
Listing 20: Saving and restoring the canvas state
Listing 21: Testing the globalCompositeOperation property
Listing 22: Drawing an image
Listing 23: Adjusting the image to the size of the canvas
Listing 24: Extracting, resizing and drawing
Listing 25: Adding a pattern to our paths
Listing 26: Generating the negative of an image
Listing 27: Enabling cross-origin access
Listing 28: Creating a document to show an image with the canvas' content
Listing 29: Creating an image with the canvas' content
Listing 30: Creating an animation
Listing 31: Creating the document to show a professional animation
Listing 32: Creating a 2D video game
Listing 33: Displaying video on canvas
Listing 34: Programming a snapshot application
Links
Canvas Tutorial
data:url Scheme
CORS Technology
requestAnimationFrame() Reference
Resources
Download Resources
Books
For Masterminds books include everything you need to develop professional applications. Create amazing websites and insanely great apps for iPhones, iPads and Mac computers.