html tutorial - globalAlpha Property in HTML5 Canvas - html5 - html code - html form




Globalalpha property in html5 canvas

Learn html - html tutorial - Globalalpha property in html5 canvas - html examples - html programs

  • The globalAlpha property sets the current alpha or transparency value of the drawing.
  • The globalAlpha property value should be a number between 0.0 (fully transparent) and 1.0 (no transparency).

Syntax for globalAlpha Property in HTML5 Canvas:

context.globalAlpha="number";

Property values for globalAlpha Property in HTML5 Canvas:

Values Description
number Specifies the transparency value and must be a number between 0.0 (fully transparent) and 1.0 (no transparency)

Sample Coding for globalAlpha Property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas globalAlpha Property</title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas globalAlpha Property</h1>
        <canvas id="wikitechyCanvas" width="300" height="180"  
           style="border:2px solid green;">
        </canvas>
        <script>
            var ga = document.getElementById("wikitechyCanvas");
            var gax= ga.getContext("2d");
            gax.fillStyle = "blue";
            gax.fillRect(40, 40, 85, 60); 

            gax.globalAlpha = 0.1;
            gax.fillStyle = "black";
            gax.fillRect(80, 80, 85, 60);
            gax.fillStyle = "red";
            gax.fillRect(100, 100, 85, 60);
        </script>
    </body>
</html>

Code Explanation for globalAlpha Property in HTML5 Canvas:

globalAlpha Property in HTML5 canvas Code Explanation

  1. “Wikitechy canvas” is used to declare the id value of the canvas tag.
  2. The getElementById() method is used to get the canvas element with the specific id (“wikitechyCanvas”).
  3. gax.getContext() returns an object that provides method and properties for drawing on the canvas.
  4. gax.fillstyle() method is used to set the color to fill the drawing.
  5. gax.fillRect() method is used to draws a "filled" rectangle (30, 30, 85, 60);
  6. gax.globalAlpha=0.1 returns the transparency value of the drawing.

Output for globalAlpha Property in HTML5 Canvas:

globalAlpha Property in HTML5 canvas Output

  1. The canvas rectangle with green color border.
  2. Define a blue-color for the rectangle.
  3. First, draw a blue rectangle. Then set the transparency (globalAlpha) to 0.1 and draw a black and red rectangle.

Browser Support for globalAlpha Property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to globalAlpha Property in HTML5 Canvas

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×