JavaScript Canvas shadowOffsetY Tutorial
last modified April 3, 2025
In this article, we explore the Canvas shadowOffsetY property in JavaScript. This property controls the vertical offset of shadows in HTML canvas drawings. Mastering shadows enhances depth and realism in your graphics.
Basic Definition
The shadowOffsetY property specifies the vertical distance of a shadow from the shape. Positive values move the shadow down, negative values move it up. It works with shadowColor, shadowBlur, and shadowOffsetX for full control.
Shadow properties must be set before drawing the shape. The shadowOffsetY default is 0 (no vertical offset). Combined with other shadow properties, it creates realistic lighting effects.
Basic shadowOffsetY Usage
This example demonstrates how to create a simple shadow with vertical offset.
<!DOCTYPE html>
<html>
<head>
<title>Basic shadowOffsetY</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetY = 15;
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
This code creates a blue rectangle with a semi-transparent black shadow. The shadow appears 15 pixels below the rectangle due to shadowOffsetY.
The shadowColor uses rgba for transparency. shadowBlur softens the edges. The shadow only appears below the shape because we only set vertical offset.
Negative shadowOffsetY
This example shows how negative values create shadows above objects.
<!DOCTYPE html>
<html>
<head>
<title>Negative shadowOffsetY</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(255, 0, 0, 0.7)';
ctx.shadowBlur = 5;
ctx.shadowOffsetY = -10;
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
Here we create a yellow circle with a red shadow appearing above it. The negative shadowOffsetY (-10) moves the shadow upward.
The semi-transparent red shadow (rgba) creates a glowing effect above the circle. This technique can simulate light coming from below.
Combined shadowOffsetX and shadowOffsetY
This example demonstrates using both X and Y offsets for diagonal shadows.
<!DOCTYPE html>
<html>
<head>
<title>Combined Shadow Offsets</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
This creates a green rectangle with a shadow offset diagonally down-right. The combination of X and Y offsets (both 10) positions the shadow at 45°.
The shadowBlur of 15 creates a soft, diffused shadow effect. The rgba alpha value (0.6) makes the shadow partially transparent.
Animated shadowOffsetY
This example shows how to animate the shadowOffsetY property for dynamic effects.
<!DOCTYPE html>
<html>
<head>
<title>Animated shadowOffsetY</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let offset = 0;
let direction = 1;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowColor = 'rgba(0, 0, 200, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetY = offset;
ctx.fillStyle = 'orange';
ctx.fillRect(100, 50, 100, 100);
offset += direction;
if (offset > 20 || offset < 0) direction *= -1;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
This animation makes the shadow move up and down continuously. The offset variable changes between 0 and 20, reversing direction at the limits.
The requestAnimationFrame method creates smooth animation. The shadow appears to bounce under the orange square, creating a floating effect.
Text with shadowOffsetY
This example applies shadowOffsetY to text for stylish typography effects.
<!DOCTYPE html>
<html>
<head>
<title>Text with shadowOffsetY</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Large text with subtle shadow
ctx.shadowColor = 'rgba(100, 100, 100, 0.7)';
ctx.shadowBlur = 3;
ctx.shadowOffsetY = 3;
ctx.font = 'bold 48px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello World', 50, 100);
// Small text with strong shadow
ctx.shadowColor = 'black';
ctx.shadowBlur = 0;
ctx.shadowOffsetY = 2;
ctx.font = '20px Arial';
ctx.fillStyle = 'pink';
ctx.fillText('shadowOffsetY example', 50, 150);
</script>
</body>
</html>
This demonstrates two text styles with different shadow effects. The large text has a soft, subtle shadow while the small text has a sharp shadow.
Notice how shadowBlur affects the softness. The first shadow uses rgba for transparency while the second uses solid black for crisp edges.
Source
MDN Canvas shadowOffsetY Documentation
In this article, we explored the shadowOffsetY property for creating vertical shadow effects in Canvas. These techniques add depth and dimension to your graphics and text elements in web applications.
Author
List all JS Canvas tutorials.