Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Drop Shadow with HTML5 Canvas
In HTML5 canvas, you can add shadows to shapes, lines, texts, and images to give them the appearance of depth. You can use the following canvas context attributes to add shadows when using the HTML5 canvas.
shadowOffsetX()
shadowOffsetY()
shadowColor()
shadowBlur()
shadowOffsetX()
The property can be used to get or set a shadow's horizontal distance of a shadow from a page. To change the location of a shadow, you can use positive or negative numbers. Zero is the default value.
Syntax
Following is the syntax for shadowOffsetX()
ctx.shadowOffsetX = h_distance;
where h_distance belongs to the horizontal distance of a shadow from page.
shadowOffsetY()
The property can be used to get or set a shadow's vertical distance of a shadow from a page. To change the location of a shadow, you can use positive or negative numbers. Zero is the default value.
Syntax
Following is the syntax for shadowOffsetY()
ctx.shadowOffsetX = v_distance;
where v_distance belongs to the vertical distance of a shadow from page.
shadowColor()
The shadowColor() property is used to get or set the color to use for shadows.
Syntax
Following is the syntax for shadowColor()
ctx.shadowColor
Where shadowColor is the CSS color.
shadowBlur()
The shadowBlur() property is used to get or set the current blur value that is applied to shadows.
Syntax
Following is the syntax for shadowBlur()
ctx.shadowBlur = blur_value
Where blur_value is the amount of blur that is applied to shadows.
Let's look into the following examples to get a clear idea on drop shadows with HTML5 canvas
Example
In the following example we are creating a series of squares with different blur degrees.
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("mytutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowColor = "green";
ctx.strokeRect(60, 60, 210, 210);
ctx.shadowColor = "blue";
ctx.strokeRect(85, 85, 210, 210);
}
</script>
</body>
</html>
Output
When the script gets executed, it will generate an output displaying the series of squares with varying degrees of shadow blur on the webpage.
Example
Considering the following example, we are creating a shadow blur to the canvas.
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="300" height="150"></canvas>
<script>
var c = document.getElementById("mytutorial");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "blue";
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 100, 80);
</script>
</body>
</html>
Output
On running the above script, it will generate an output consisting of a canvas drawn on the webpage filled with green colour with a shadow blur of blue color.
Example
Looking the following example, we are creating a shadow for text.
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById("mytutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.shadowColor = 'grey';
ctx.shadowBlur = 2;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 9;
ctx.font = 'italic 32px sans-serif ';
ctx.fillText('TUTORIALSPOINT', 10, 150);
}
</script>
</body>
</html>
Output
When the user tries to execute the script, the output window pops up, displaying the text used in the script along with a shadow added to the text on the webpage.
Example
Let's look into the following example, we are creating a blur for the text.
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is shadow test", 5, 30);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of text with a shadow blur added to it on the webpage.
1K+ Views
