Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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:

Your browser does not support the HTML5 canvas tag.
<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:

Your browser does not support the HTML5 canvas tag.
<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:

Your browser does not support the HTML5 canvas tag.
<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:

Your browser does not support the HTML5 canvas tag.
<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:

Your browser does not support the HTML5 canvas tag.
<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:

Your browser does not support the HTML5 canvas tag.
<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 »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.