Canvas API Quick Guide

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

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.

Apple Intelligence for Masterminds
2nd Edition 2026

SwiftUI for Masterminds
7th Edition 2026

Swift for Masterminds
2nd Edition 2026

HTML5 for Masterminds
4th Edition 2026