Create shadows using HTML5 Canvas

 

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

create 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.

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *