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:
ctxis the 2D rendering context of the canvas.coloris 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></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();
//]]]]><
