How to use HTML5 Canvas Global Alpha
This article describe about HTML5 Canvas Global Alpha.
HTML5 Canvas Global Alpha
With the HTML5 you can set the opacity of the elements, you can use the GlobalAlpha property of the canvas context. And it is defined by a real number between 0 and 1, 1 is fully opaque and 0 is the fully transparent.
Syntax
|
<script>
context.globalAlpha = 0.7;
</script>
|
Example:
|
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myownCanvas {
border: 2px solid #9C9898;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myownCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(210, 20, 110, 110);
context.fillStyle = "yellow";
context.fill();
context.globalAlpha = 0.7;
context.beginPath();
context.arc(310, 120, 60, 0, 2 * Math.PI, false);
context.fillStyle = "brown";
context.fill();
};
</script>
</head>
<body>
<canvas id="myownCanvas" width="578" height="200"></canvas>
</body>
</html>
|
Output
You may also want to read these related articles click here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here