Documentation

The <canvas> element has been programmed with a powerful set of 2D drawing functions for us to use. For example, we can use the fillRect() function to draw and fill a rectangle. Learning about these drawing functions is important because they define both what <canvas> can do and the language it understands. Trying to ask <canvas> to do something it doesn’t know how to do or using language it doesn’t understand is never going to get us very far. Fortunately, these drawing functions are documented in the <canvas> API (application programming interface).

But <canvas> is more than just a powerful drawing tool; it’s also a native HTML element. This means that it has the properties and functions of a native HTML element—and can be fully integrated into complex dynamic webpages, interact with other HTML elements, be styled with CSS and scripted with JavaScript, and respond to user and system events. There is a lot to absorb.

My goal is to be thorough without overwhelming, but it’s a delicate balance that requires continuous adjustment. Please consider these documents a work in progress.

The recommended specifications for the <canvas> element and its 2D context put forth by the World Wide Web Consortium (W3C) can be found here and here. The <canvas> element is well-supported in all modern web browsers, including Chrome, Firefox, Internet Explorer 10+, Safari, Edge, the Android Browser, and Opera. However, some implementations are not fully compliant with these specifications. I will attempt to point out any major issues.

Getting started

1. The <canvas> element
1. Add a <canvas> to a webpage
2. Store a reference to a <canvas> in a variable
3. Get the width and the height of a <canvas>
4. Set the width and the height of a <canvas>
5. Save a <canvas> drawing as a PNG image
6. Give a <canvas> a background color or border
7. Center a <canvas> on a webpage
8. Add a hidden <canvas> to a webpage
9. Layer a second <canvas>
10. Move a layered <canvas>
11. Attach an event handler to a <canvas>
12. Get event coordinates relative to a <canvas>
13. Scale a <canvas> for high resolution screens
14. Provide fallback content for a <canvas>
2. The 2D context
1. The drawing state
2. The 2D context’s coordinate space
3. Store a reference to the 2D context in a variable
4. Get a reference to the <canvas>
5. Get the width and the height of the <canvas>
6. Save the current drawing state
7. Restore the context to a previous drawing state
8. Restore the context to its original state
3. Paths and shapes
1. Start a new path
2. Start a new subpath
3. Close the current subpath
4. Stroke a path
5. Fill a path
6. Draw a line
7. Draw a circle
8. Draw a rectangle
9. Clear a rectangle
10. Draw an arc using the arc() function
11. Draw an arc using the arcTo() function
12. Draw a quadratic Bézier curve
13. Draw a cubic Bézier curve
14. Join Bézier curves smoothly
15. Draw a complex path
16. Create a clipping region
17. Determine if a point is in the current path
18. Add a hit region to the bitmap
19. Draw a focus ring around the current path
4. Line styles
1. Set and get the line width
2. Set and get the line cap style
3. Set and get the line join style
4. Set and get the miter limit ratio
5. Set and get the line dash pattern
6. Set and get the line dash offset
5. Fill and stroke styles
1. Set and get the fill style
2. Set and get the stroke style
3. Define a color
4. Create a linear gradient
5. Create a radial gradient
6. Create a tile pattern
6. Text
1. Fill text
2. Stroke text
3. Set the font style
4. Set text alignment
5. Set baseline alignment
6. Get the text width
7. Images
1. Draw an image
2. Draw an image with scaling
3. Draw an image with region mapping
8. Transformations
1. Translate the context
2. Scale the context
3. Rotate the context
4. Transform the context
5. Set the context transformation matrix
9. Compositing
1. Set the context’s alpha value
2. Set the context’s composition operation
10. Shadows
1. Set the shadow color
2. Set the shadow offset value
3. Set the shadow blur level
11. Pixel manipulation
1. Create new image data
2. Get image data
3. Get the width and the height of image data
4. Get pixel data from image data
5. Draw image data
12. JavaScript
13. HTML and CSS