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




Shadowcolor property in html5 canvas

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

  • The shadowColor property is used to set or returns the color that is used for shadows.
  • shadowColor property and shadowBlur property are combined to create shadow.

Syntax for shadowColor Property in HTML5 Canvas:

context.shadowColor=color;

Property values for shadowColor Property in HTML5 Canvas:

Value Description
color The color value is used for the shadows. The default color is black that value is #000000.

Sample Coding for shadowColor Property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas shadowColor</title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas shadowColor with example</h1>
        <canvas id="wikitechyCanvas" width="300" height="150" 
             style="border:1px solid ;">
        </canvas>
        <script>
              var r = document.getElementById("wikitechyCanvas");
              var ab = r.getContext("2d");
              ab.shadowBlur = 30;
              ab.fillStyle = "blue";
              ab.shadowColor = "red";
              ab.fillRect(10, 10, 80, 60);
              ab.shadowColor = "green";
              ab.fillRect(140, 20, 100, 80);
        </script>
    </body>
</html>

Code Explanation for shadowColor Property in HTML5 Canvas:

shadowColor Property in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is a value of id attribute for canvas element.
  2. The getElementById() method is used to get the element that has the id attribute with the “wikitechyCanvas” value.
  3. shadowBlur property is used to declare by shadow level of 30.
  4. fillStyle property is used to fill the blue color in rectangle.
  5. The first rectangle shadow will be set as red color.
  6. To draw the first rectangle using the fillRect(10, 10, 80, 60) in (x0,y0,x1,y1) coordinates.
  7. The second rectangle shadow will be set as green color.
  8. To draw the second rectangle using the fillRect(140, 20, 100, 80) in (x0,y0,x1,y1) coordinates.

Output for shadowColor Property in HTML5 Canvas:

shadowColor Property in HTML5 canvas Output

  1. canvas is used to draw a rectangle an shadowColor() property.
  2. Here the first rectangle displayed by red color shadow and the blur level is 30.
  3. Then second rectangle displayed by green color shadow and the blur level is 30.

Browser Support for shadowColor Property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes


Related Searches to shadowColor 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.

×