HTML5 Canvas Global Alpha tutorial

The opacity of Elements can be set by Global Alpha property
of the context using html5 canvas.The globalAlpha property has
a real number value between 0 and 1.
If we set globalAlpha property equal to 1 the element or objact will
be fully opaque .On the other hand if we set the globalAlpha proprty
equal to 0,the object will be fully transparent.If the value of globalAlpha
is 0.5 the object will be semi transparent.
code for setting the globalAlpha proprty will be

context.globalAlpha =0.5;

================================================

HTML5 Canvas Global Alpha Tutorial

The opacity of Elements can be set by Global Alpha property
of the context using html5 canvas.The globalAlpha property has
a real number value between 0 and 1.
If we set globalAlpha property equal to 1 the element or objact will
be fully opaque .On the other hand if we set the globalAlpha proprty
equal to 0,the object will be fully transparent.If the value of globalAlpha
is 0.5 the object will be semi transparent.
code for setting the globalAlpha proprty will be

context.globalAlpha =0.5;

================================================

globalAlpha tutorial complete code

================================================



<!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');
            // draw blue rectangle
            context.beginPath();
            context.rect(100, 50, 200, 200);
            context.fillStyle = 'blue';
            context.fill();

            // draw transparent red circle
            context.globalAlpha = 0.5;
            context.beginPath();
            context.arc(300, 250, 100, 0, 2 * Math.PI, false);
            context.fillStyle = 'red';
            context.fill();
            
        


        </script>

        
    </body>
</html>

—————————————

globalAlpha tutorial code out put

Global Alpha  tutorials  html5 canvas
————————————–

globalAlpha tutorial live demo on codepen

[codepen_embed height=500 theme_id=1 slug_hash=’MYVRKb’ user=’aslamwaqar’ default_tab=’html’

animations=’run’]

[/codepen_embed]
—————————————

globalAlph live playground

globalAlpha Tutorial live playground
—————————————

For further reading check

www.html5canvastutorials.com
www.w3schools.com

Next Lecture Global Alpha Tutorial

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 *