HTML Canvas shadowColor Property: Setting Shadow Color

HTML Canvas shadowColor Property: Setting Shadow Color

The HTML Canvas shadowColor property allows you to set the color of the shadows cast by shapes, text, and images on your canvas. This property is essential for creating visually appealing effects, adding depth, and enhancing the overall look of your canvas elements. This guide will explore the shadowColor property in detail with examples showing its practical applications.

What is the shadowColor Property?

The shadowColor property of the Canvas 2D rendering context determines the color of shadows applied to shapes, text, or images drawn on the canvas. This property takes a CSS color value as its argument. If no color is set or the color value is invalid, the default color for shadow is black (#000). By varying the shadow color you can dramatically change the visual appeal of the drawn elements giving them a more 3D or artistic appearance.

Syntax

The syntax for setting the shadowColor property is straightforward:

ctx.shadowColor = color;

Where:

• ctx is the 2D rendering context of the canvas.
• color is a string representing a valid CSS color value (e.g., 'red', '#FF0000', 'rgb(255, 0, 0)', 'rgba(255, 0, 0, 0.5)').

Values

The shadowColor property accepts standard CSS color values, which include:

• Named colors: e.g., red, blue, green, white, black
• Hexadecimal colors: e.g., #FF0000, #00FF00, #0000FF
• RGB colors: e.g., rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)
• RGBA colors: e.g., rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.8), rgba(0, 0, 255, 0.3)

The color is applied to any shadow drawn after the property is set, which can be influenced by shadowBlur, shadowOffsetX and shadowOffsetY properties.

Basic Examples

Let’s explore some basic examples to understand how to use the shadowColor property effectively.

Example 1: Basic Shadow with Red Color

This example draws a simple rectangle with a red shadow.

<canvas
  id="canvasShadowColor1"
  width="200"
  height="100"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_shadow_color1 = document.getElementById("canvasShadowColor1");
  const ctx_shadow_color1 = canvas_shadow_color1.getContext("2d");

  ctx_shadow_color1.shadowColor = "red";
  ctx_shadow_color1.shadowBlur = 10;
  ctx_shadow_color1.shadowOffsetX = 5;
  ctx_shadow_color1.shadowOffsetY = 5;

  ctx_shadow_color1.fillStyle = "lightblue";
  ctx_shadow_color1.fillRect(20, 20, 80, 50);

//]]]]><![CDATA[>
</script>

Example 2: Shadow with RGBA Color

This example demonstrates how to use an RGBA color for the shadow, adding transparency.

<canvas
  id="canvasShadowColor2"
  width="200"
  height="100"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_shadow_color2 = document.getElementById("canvasShadowColor2");
  const ctx_shadow_color2 = canvas_shadow_color2.getContext("2d");

  ctx_shadow_color2.shadowColor = "rgba(0, 0, 255, 0.5)";
  ctx_shadow_color2.shadowBlur = 8;
  ctx_shadow_color2.shadowOffsetX = 3;
  ctx_shadow_color2.shadowOffsetY = 3;

  ctx_shadow_color2.fillStyle = "yellow";
  ctx_shadow_color2.beginPath();
  ctx_shadow_color2.arc(100, 50, 30, 0, 2 * Math.PI);
  ctx_shadow_color2.fill();

//]]]]><![CDATA[>
</script>

Example 3: Shadow with Hex Color

This example sets the shadow color using a hexadecimal value.

<canvas
  id="canvasShadowColor3"
  width="200"
  height="100"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_shadow_color3 = document.getElementById("canvasShadowColor3");
  const ctx_shadow_color3 = canvas_shadow_color3.getContext("2d");

  ctx_shadow_color3.shadowColor = "#00FF00";
  ctx_shadow_color3.shadowBlur = 12;
  ctx_shadow_color3.shadowOffsetX = 6;
  ctx_shadow_color3.shadowOffsetY = 6;

  ctx_shadow_color3.font = "30px Arial";
  ctx_shadow_color3.fillStyle = "black";
  ctx_shadow_color3.fillText("Text", 50, 60);

//]]]]><![CDATA[>
</script>

Advanced Examples

Let's explore some advanced techniques using the shadowColor property.

Example 4: Animated Shadow Color

This example animates the shadow color using requestAnimationFrame.

<canvas
  id="canvasShadowColor4"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_shadow_color4 = document.getElementById("canvasShadowColor4");
  const ctx_shadow_color4 = canvas_shadow_color4.getContext("2d");
  let hue = 0;

  function animateShadow() {
    ctx_shadow_color4.clearRect(0, 0, canvas_shadow_color4.width, canvas_shadow_color4.height);
    ctx_shadow_color4.shadowColor = `hsl(${hue}, 100%, 50%)`;
    ctx_shadow_color4.shadowBlur = 10;
    ctx_shadow_color4.shadowOffsetX = 5;
    ctx_shadow_color4.shadowOffsetY = 5;

    ctx_shadow_color4.fillStyle = "purple";
    ctx_shadow_color4.fillRect(60, 50, 80, 50);

    hue = (hue + 1) % 360;
    requestAnimationFrame(animateShadow);
  }
  animateShadow();

//]]]]><![CDATA[>
</script>

Example 5: Multiple Shadows with different Colors

This example demonstrates how to use save() and restore() methods for multiple shadows with different colors.

<canvas
  id="canvasShadowColor5"
  width="250"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_shadow_color5 = document.getElementById("canvasShadowColor5");
  const ctx_shadow_color5 = canvas_shadow_color5.getContext("2d");

  // First shadow
  ctx_shadow_color5.save();
  ctx_shadow_color5.shadowColor = "blue";
  ctx_shadow_color5.shadowBlur = 5;
  ctx_shadow_color5.shadowOffsetX = 2;
  ctx_shadow_color5.shadowOffsetY = 2;

  ctx_shadow_color5.fillStyle = "yellow";
  ctx_shadow_color5.fillRect(20, 20, 60, 60);
  ctx_shadow_color5.restore();

  // Second shadow
  ctx_shadow_color5.save();
  ctx_shadow_color5.shadowColor = "green";
  ctx_shadow_color5.shadowBlur = 8;
  ctx_shadow_color5.shadowOffsetX = 4;
  ctx_shadow_color5.shadowOffsetY = 4;

  ctx_shadow_color5.fillStyle = "lightblue";
  ctx_shadow_color5.fillRect(120, 20, 60, 60);
  ctx_shadow_color5.restore();

  // Third shadow
  ctx_shadow_color5.save();
  ctx_shadow_color5.shadowColor = "red";
  ctx_shadow_color5.shadowBlur = 10;
  ctx_shadow_color5.shadowOffsetX = 6;
  ctx_shadow_color5.shadowOffsetY = 6;

  ctx_shadow_color5.fillStyle = "lightgreen";
  ctx_shadow_color5.fillRect(70, 80, 60, 60);
  ctx_shadow_color5.restore();

//]]]]><![CDATA[>
</script>

Practical Use Cases

The shadowColor property is used in a variety of applications to enhance visual effects:

• Graphical User Interfaces: Adding subtle shadows to buttons and other elements to create a sense of depth.
• Game Development: Using shadows to give game characters and objects a 3D appearance and add visual flair.
• Artistic Creations: Creating custom artwork with various shadow colors to achieve unique effects.
• Data Visualization: Highlighting data points or sections of a chart by using colored shadows.
• Text Effects: Applying colored shadows to text to make it stand out.

Browser Support

The shadowColor property is widely supported across all modern browsers, ensuring consistent rendering across different platforms.

Conclusion

The HTML Canvas shadowColor property is a powerful tool for enhancing the visual depth and appeal of your canvas drawings. By varying the color of the shadows, you can create a wide range of effects and bring your graphics to life. Experiment with different colors and explore the possibilities this property offers to create visually stunning and engaging graphics for your web projects.