- 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 - shadowOffsetY Property
The HTML Canvas shadowOffsetY property of Canvas 2D API from the CanvasRenderingContext2D interface is used to specify the vertical distance of the shadow to be drawn for the rendered graphic.
Possible input values
It takes a float integer value representing the shadow length vertically to be needed from the graphic on the Canvas element.
Example
The following example draws a circle onto the Canvas element and applies shadow to it with its offset Y-axis being positive by using the HTML Canvas shadowOffsetY property.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="200" height="250" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.shadowColor = 'blue'; context.shadowBlur = 100; context.shadowOffsetY = 50; context.fillStyle = 'orange'; context.arc(100, 100, 50, 0, 2 * Math.PI); context.fill(); </script> </body> </html>
Output
The output returned by the following code on the webpage as −
Example
The following example applies shadow to a circle drawn on the Canvas element with the shadow offset Y being negative so that the shadow moves upwards.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body> <canvas id="canvas" width="200" height="250" style="border: 1px solid black;"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.shadowColor = 'blue'; context.shadowBlur = 100; context.shadowOffsetY = -50; context.fillStyle = 'orange'; context.arc(100, 150, 50, 0, 2 * Math.PI); context.fill(); </script> </body> </html>
Output
The output returned by the following code on the webpage as −
To Continue Learning Please Login
Login with Google