How to draw HTML5Canvas TransparentShape
In this html5 Canvas tutorial we will discuss how to draw transparent shape we set the opacity of a shape using the HTML5 canvas API.For controlling opacity we use globalAlpha property.
code for setting globalAlpha property is.
context.globalAlpha =[value]
The globalAlpha poperty accept any real number between 0 to 1.
value of 1 represent shape fully opaque.For fully transparent shape value is set 0.
Steps for drawing htm5canvas transparentshape
To draw transparent shape in html5 canvas,we wil take the following steps.
Step 1 for drawing html5 canvas transparent shape: Define a 2D Canvas
var canvas =document.getElementById("myCanvas");
var context =canvas.getContext("2d");
Step 2. Draw a rectangle using html5 Canvas
// draw a rectangle
context.beginPath();
context.rect(240,30,130,130);
context.fillStyle ="blue"
context.fill();
Step 3: Set the globalAlpha property and draw a circle using html5 Canvas
//draw circle
context.globalAlpha =0.5; // set global alpha
context.beginPath();
context.arc(359,150,80,2* Math.PI, false);
context.fillStyle =#ff0000";
context.fill();
Step 4: Embed canvas tag in body of web document
canvas width="600" height="400" style ="border: 1px solid #0000ff">
——————————————————————-
HTML5 Canvas Transparent Shape Complete code example
———————————————————————
<html>
<head>
<title>The type of lineJoin.</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="200"
style="border: 1px solid black">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw a rectangle
context.beginPath();
context.rect(240,30,130,130);
context.fillStyle ="blue"
context.fill();
//draw circle
context.globalAlpha =0.5; // set global alpha
context.beginPath();
context.arc(359,150,80,2* Math.PI, false);
context.fillStyle ="#ff0000";
context.fill();
</script>
</body>
</html>
=============================================
HTML5 Canvas drawing Transparent Shape tutorial
=============================================
——————————————–
live demo drawing HTML5 Canvas Transparent Shap on codepen
——————————————-
[codepen_embed height=500 theme_id=1 slug_hash=’myMqpP’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
Next Lecture How to Create Shadows
All the lectures related to the html5 canvas are covered in this course offered by theiteducation.com. This is the plattform which provides free and step by step audios and videos tutorials for the beginners as well as all those who are working in the iteducation field.
