- 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 - imageSmoothingQuality Property
The HTML Canvas imageSmoothingQuality property of the Canvas 2D API can be used to set the quality of the image smoothing.
Possible input values
The values accepted by the property are −
S.No | Value & Description |
---|---|
1 | low set quality as low. |
2 | medium set quality as medium. |
3 | high set quality as high. |
Example
The following example takes and image and applies low smoothing quality using the property HTML Canvas imageSmoothingQuality property.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="400" height="200" style="border: 1px solid black;background-color: grey;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); const image = new Image() image.src = 'https://www.tutorialspoint.com/images/logo.png'; context.imageSmoothingQuality = 'low'; context.drawImage(image, 25, 20, 300, 150); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example
For the following example, an image is rendered on the Canvas element by setting the smoothing quality as medium using the property imageSmoothingQuality.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="400" height="200" style="border: 1px solid black;background-color: grey;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); const image = new Image() image.src = 'https://www.tutorialspoint.com/images/logo.png'; context.imageSmoothingQuality = 'medium'; context.drawImage(image, 25, 20, 300, 150); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example
The following example sets the image smoothing quality as high for the image object inside the Canvas element using the property imageSmoothingQuality.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="400" height="200" style="border: 1px solid black;background-color: grey;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); const image = new Image() image.src = 'https://www.tutorialspoint.com/images/logo.png'; context.imageSmoothingQuality = 'high'; context.drawImage(image, 25, 20, 300, 150); </script> </body> </html>
Output
The output returned by the above code on the webpage as −
To Continue Learning Please Login
Login with Google