How to use HTML5 Canvas Global Alpha

This article describe about HTML5 Canvas Global Alpha.
  • 2822

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


HTML5 Canvas Global Alpha pic2.jpg

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

© 2020 DotNetHeaven. All rights reserved.