- 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 - Shadows and Transformations
Canvas API also consists of some advanced graphic styling features which can be used to improve the appearance of the rendered graphics onto the Canvas element. Shadows and Transformations can be applied to the canvas context object by using the available methods and properties.
The interface CanvasRenderringContext2D contains almost all the methods and properties to create attractive graphics using shadows and transformations inside the Canvas element.
Properties
Following are various properties related to shadows and transformations available in HTML5.
| S.No | Property & Description |
|---|---|
| 1 | shadowBlur
This property of the Canvas API applies blurred shadows to the Context object drawn inside canvas element. |
| 2 | shadowColor
The property shadowColor specifies the color to be applied to the Context object shadow drawn inside the Canvas element. |
| 3 | shadowOffsetX
We can set the horizontal shadow distance to be drawn for the context object using shadowOffsetX property. |
| 4 | shadowOffsetY
We can set the vertical shadow distance to be drawn for the context object using shadowOffsetY property. |
Methods
The methods available to create graphics with shadows and transformations inside the Canvas element are given in the below table.
| S.No | Method & Description |
|---|---|
| 1 | getTransform() This method of CanvasRenderringContext2D interface retrieves the transforms applied to the current canvas element context. |
| 2 | resetTransform()
This method resets the current transform into the identity matrix by transferring the current graphics into original shape or path inside the Canvas element. |
| 3 | restore()
This method restores the most recently saved canvas state when called. |
| 4 | rotate()
This method of Canvas API adds rotation to the transformation matrix of the context object. |
| 5 | save()
This method saves the most recent canvas state when called by pushing it into the stack. |
| 6 | scale()
This method scales the current context object horizontally/vertically when called. |
| 7 | setTransform()
This method of the Canvas 2D API invokes a transformation matrix for the given shape and helps us to perform movement operations such as rotate, translate, and scale. |
| 8 | transform()
This method changes the transformation matrix which allows us to scale, rotate, skew the context object. |
| 9 | translate()
This method of the Canvas API adds the translation transformation to the current matrix. |