- 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 - Images
Images are very important and primary requirement to generate attractive visual content. Canvas API has a wide variety of image manipulation features to take an input image as well as to manipulate them based on the requirement.
The interfaces CanvasRenderringContext2D and ImageData contains all the methods and properties to create attractive graphics using images on the Canvas element.
Properties
Following are the various properties available in HTML5 to deal with images −
| S.No | Property & Description |
|---|---|
| 1 | data
This data property returns the pixel data of ImageData object. |
| 2 | imageSmoothingEnabled
This property of the Canvas API determines whether the scaled images available are smoothed or not. It returns true if image is scaled and false if it is not scaled. |
| 3 | imageSmoothingQuality
This property of the Canvas API lets us to set the quality of the image smoothing for an image drawn on Canvas. |
Methods
The methods available to create graphics based on images inside the Canvas element are given in the below table.
| S.No | Method & Description |
|---|---|
| 1 | createImageData()
This method can be used to create a new ImageData object with given dimensions. The object formed is filled with black pixels unless changed. |
| 2 | drawImage()
This method draws the image onto the Canvas element. |
| 3 | getImageData()
The method getImageData() captures the image frame for the given co-ordinates passed as the parameters. The captured image is printed in the canvas element at given point. |
| 4 | ImageData()
This constructor method returns newly created Image data object with the data passed as parameters. |
| 5 | putImageData()
This method paints the data given by ImageData object onto the Canvas element. We can retrieve this data using getImageData() method. |