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
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
—————————————