How to use HTML5 Canvas shadow
This article describe about HTML5 Canvas shadow.
HTML5 Canvas Shadow
Like a real object shadow in HTML5 we can also create shadow of object by using the HTML5 property, ShadowColor and ShadowBlur where ShadowColor property define the color of shadow. And ShadowBlur property define the size of shadow.
Syntax
<script>
context.shadowColor = "gray";
context.shadowBlur = 25;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
</script>
|
EXample:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myownCanvas {
border: 2px solid #9C9898;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myownCanvas");
var context = canvas.getContext("2d");
context.rect(188, 40, 200, 100);
context.fillStyle = "blue";
context.shadowColor = "gray";
context.shadowBlur = 25;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fill();
};
</script>
</head>
<body>
<canvas id="myownCanvas" width="600" height="220"></canvas>
</body>
</html>
|
Output
You may also want to read these related articles Click here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here