Step for creating shadows in html5 Canvas
To create shadows using html5 Canvas following steps are necessary.In this tutorial we are discussing how to create shadows. In previous tutorial we discussed how to set image length and width using html5 canvas. Moreover html5 canvas video tutorials html5 canvas tutorial with step by step instructions pasted below.
Set shadow attributes in the Context context
1. Shadow x and y offset:
offset show the distance of shadow from the original object.
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
2. Shadow blur:
This attribute set the amount of blurring applied for creating shadows.
context.shadowBlur =3;
3. Shadow color:
This property set the color of the shadow.
context.shadowColor="grey"
Complete code for creating shadows using html5 Canvas
<!DOCTYPE html>
<html>
<head>
<title>Drawing </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context =canvas.getContext('2d');
context.shadowOffsetX = 25;
context.shadowOffsetY = 25;
context.shadowBlur = 10;
context.shadowColor = '#aaa';
context.fillStyle = 'red';
context.rect(100, 100, 300, 200);
context.fill();
</script>
</body>
</html>
===========================================================
Out put of code for creating shadows using html5 canvas
live demo on codepen for creating shadows using html5 canvas
[codepen_embed height=300 theme_id=1 slug_hash=’ByrMeY’ user=’aslamwaqar’ default_tab=’html’ animations=’run’]
[/codepen_embed]
==========================================================
live playground on code pen
If you want to create shadows using html5 canvas then click on the link below to understand it better
How to Create shadows
For further reading check:
www.html5canvastutorials.com
html5 canvas library is present on youtube in the form of html5 canvas play-list covering all HTML5 topics image annotation, html5 canvas drag and drop, html5 canvas layers and all the topics of html5 canvas javascript framework.youtube channel. All the fields and all the areas of Information technology is covered by The it education even on the WEB or even on the youtube channel.
