HTML Canvas Shadows
HTML Canvas Shadows
To create shadows in canvas, we use the following four properties:
-
shadowColor- defines the color of the shadow -
shadowBlur- defines the blur amount of the shadow -
shadowOffsetX- defines the distance that shadows will be offset horizontally -
shadowOffsetY- defines the distance that shadows will be offset vertically
The shadowColor Property
The shadowColor property defines the color
of the shadow.
The default value is fully transparent black.
Example
Here we create a filled blue rectangle with a light blue shadow, and a stroked blue rectangle with a light blue shadow:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY
= 10;
// Filled rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20,
20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
Try it Yourself »
Example
Here we create a filled purple text with a light blue shadow, and a stroked purple text with a light blue shadow:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY
= 5;
ctx.font = "50px Arial";
// Filled text
ctx.fillStyle =
"purple";
ctx.fillText("Hello World",10,60);
// Stroked text
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
Try it Yourself »
The shadowBlur Property
The shadowBlur property defines the amount
of blur applied to the shadow.
The default value is 0 (no blur).
Example
Filled and stroked rectangles with a shadowBlur
property set to 8:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY
= 10;
// Filled rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20,
20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
Try it Yourself »
Example
Filled and stroked text with a shadowBlur
property set to 4:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY
= 5;
ctx.font = "50px Arial";
// Filled text
ctx.fillStyle =
"purple";
ctx.fillText("Hello World",10,60);
// Stroked text
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
Try it Yourself »
The shadowOffsetX Property
The shadowOffsetX property defines the
horizontal distance of the shadow from the shape.
Positive values move the shadow to the right, and negative values moves the shadow to the left.
The default value is 0 (no horizontal offset distance).
Example
First rectangle with shadowOffsetX = 5,
second rectangle with shadowOffsetX = 15,
third rectangle with shadowOffsetX = -10:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadowcolor
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
//
rectangle 1
ctx.shadowOffsetX = 5;
ctx.fillRect(20, 20, 100, 100);
// rectangle 2
ctx.shadowOffsetX = 15;
ctx.fillRect(170, 20, 100,
100);
// rectangle 3
ctx.shadowOffsetX = -10;
ctx.fillRect(320,
20, 100, 100);
</script>
Try it Yourself »
The shadowOffsetY Property
The shadowOffsetY property defines the
vertical distance of the shadow from the shape.
Positive values move the shadow down, and negative values moves the shadow up.
The default value is 0 (no vertical offset distance).
Example
First rectangle with shadowOffsetY = 5,
second rectangle with shadowOffsetY = 15,
third rectangle with shadowOffsetY = -10:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadowcolor
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
//
rectangle 1
ctx.shadowOffsetY = 5;
ctx.fillRect(20, 20, 100, 100);
// rectangle 2
ctx.shadowOffsetY = 15;
ctx.fillRect(170, 20, 100,
100);
// rectangle 3
ctx.shadowOffsetY = -10;
ctx.fillRect(320,
20, 100, 100);
</script>
Try it Yourself »
