- HTML Canvas Tutorial
- HTML Canvas - Home
- HTML Canvas - Introduction
- Environmental Setup
- HTML Canvas - First Application
- HTML Canvas - Drawing 2D Shapes
- HTML Canvas - Path Elements
- 2D Shapes Using Path Elements
- HTML Canvas - Colors
- HTML Canvas - Adding Styles
- HTML Canvas - Adding Text
- HTML Canvas - Adding Images
- HTML Canvas - Canvas Clock
- HTML Canvas - Transformations
- Composting and Clipping
- HTML Canvas - Basic Animations
- Advanced Animations
- HTML Canvas API Functions
- HTML Canvas - Element
- HTML Canvas - Rectangles
- HTML Canvas - Lines
- HTML Canvas - Paths
- HTML Canvas - Text
- HTML Canvas - Colors and Styles
- HTML Canvas - Images
- HTML Canvas - Shadows and Transformations
- HTML Canvas Useful Resources
- HTML Canvas - Quick Guide
- HTML Canvas - Useful Resources
- HTML Canvas - Discussion
HTML Canvas - Element
Canvas element is the outline of the HTML Canvas tag which is defined by the HTML code and is styled using the CSS. We can render graphics inside the canvas using JavaScript code by a context object.
Canvas element is equipped with the interface HTMLCanvasElement containing properties and methods to manipulate the layout as well as the features supported by the Canvas element.
The properties and methods available to create and modify the Canvas element are given in the below table.
Properties
Following are various properties of HTML Canvas Element −
| S.No | Property and Description |
|---|---|
| 1 | Canvas
The canvas property of CanvasRenderingContext2D interface provides the canvas outline by using CSS styling. Without styling, we cannot see it on the webpage even though it is formed. |
| 2 | Width
This property helps us to set the width for the Canvas layout. |
| 3 | Height
This property helps us to set the height for the Canvas layout. |
Methods
Below given is the list of methods provided by the HTML Canvas Element class −
| S.No | Method & Description |
|---|---|
| 1 | getContext()
This method refers to the context of the drawing on the Canvas element. We give the context type and attributes as the parameters which are displayed on the Canvas. |