The HTML5 <canvas> element is used for drawing graphics via scripting (commonly JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics.
The getContext() method returns an object which presents properties and methods for drawing on the canvas.
Colors, Styles, and Shadows
| Property | Description |
|---|---|
| fillStyle | Sets or returns the color, gradient, or pattern used to fill the shapes. |
| strokeStyle | Sets or returns the color, gradient, or pattern used for the lines around the shapes. |
| shadowColor | Sets or returns the color of the shadows. |
| shadowBlur | Sets or returns the blur level of the shadows. |
| shadowOffsetX | Sets or returns the x offset of the shadow. |
| shadowOffsetY | Sets or returns the y offset of the shadow. |
| Method | Description |
|---|---|
| createLinearGradient() | Creates a linear gradient for using on the canvas content. |
| createPattern() | Repeats a particular element in the specified direction. |
| createRadialGradient() | Creates a circular/radial gradient for using on the canvas content. |
| addColorStop() | Defines colors and stop positions in the gradient object. |
Line Styles
| Property | Description |
|---|---|
| lineCap | Sets or returns the style of the line’s end caps. |
| lineJoin | Sets or returns the type of drawn corners. |
| lineWidth | Sets or returns the width of the current line. |
| miterLimit | Sets or returns the maximum miter length. |
Rectangles
| Method | Description |
|---|---|
| rect() | Creates rectangles. |
| fillRect() | Draws filled rectangles. |
| strokeRect() | Draws rectangular outlines. |
| clearRect() | Clears the specified pixels within a particular rectangle. |
Paths
| Method | Description |
|---|---|
| fill() | Fills the path to the canvas. |
| stroke() | Draws the defined path. |
| beginPath() | Begins a new path or resets the current path. |
| moveTo() | Moves the path to the defined point in the canvas without drawing a line. |
| closePath() | Adds a path from the current point back to the start point. |
| lineTo() | Adds a line to the current sub-path. |
| clip() | Restricts the drawing to a particular area. |
| quadraticCurveTo() | Adds a quadratic Bézier curve. |
| bezierCurveTo() | Adds a cubic Bézier curve. |
| arc() | Adds an arc/curve for creating circles or parts of circles. |
| arcTo() | Adds an arc/curve between two tangents. |
| isPointInPath() | Defines whether the specified point is in the current path, or not. |
Transformations
| Method | Description |
|---|---|
| scale() | Scales up or scales down the current drawing. |
| rotate() | Rotates the current drawing. |
| translate() | Adjusts the coordinate system of the canvas. |
| transform() | Applies transformation matrix to the canvas. |
| setTransform() | Is similar to transform(). Can be used to skew, scale, and translate the canvas. |
Text
| Property | Description |
|---|---|
| font | Sets the appearance of a text drawn on the canvas. |
| textAlign | Sets the alignment of a text drawn on the canvas. |
| textBaseline | Sets the vertical alignment of a text drawn on the canvas. |
| Method | Description |
|---|---|
| fillText() | Adds text to the canvas. |
| strokeText() | Adds outlined text to the canvas. |
| measureText() | Measures the text width. |
Image Drawing
| Method | Description |
|---|---|
| drawImage() | Draws an image, video, or canvas onto the canvas. |
Pixel Manipulation
| Property | Description |
|---|---|
| width | Returns an ImageData object’s width. |
| height | Returns an ImageData object’s height. |
| data | Returns an object which contains image data of a specified ImageData object. |
| Method | Description |
|---|---|
| createImageData() | Creates a newImageData object. |
| getImageData() | Returns an ImageData object which copies the pixel data for the specified rectangle. |
| putImageData() | Puts the image data onto the canvas from the ImageData object. |
Compositing
| Property | Description |
|---|---|
| globalAlpha | Sets or returns the current alpha/transparency/ value. |
| globalCompositeOperation | Sets or returns the type of compositing operation when a new image is drawn. |
Other
| Method | Description |
|---|---|
| save() | Saves the current state of a context. |
| restore() | Returns the path state and attributes saved previously. |
| createEvent() | Creates an event object. |
| getContext() | Returns a drawing context. |
| toDataURL() | Returns a data URL. |
Practice Your Knowledge
What can the method getContext('2d') do in HTML5 Canvas?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.