EN
JavaScript - draw shadow
0
points
In this article, we would like to show you how to draw shadow on HTML canvas element using JavaScript.
To add shadow to drawings we use the following properties:
shadowOffsetX- specifies the distance in pixels that shadows will be offset horizontally,shadowOffsetY- specifies the distance in pixels that shadows will be offset vertically,shadowColor- specifies the color of the shadow,shadowBlur- specifies the amount of blur applied to shadow.
1. Shadow for filled objects
In this section, we present how to add shadows to the filled square drawings.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="400" height="150"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
// General settings
context.font = '40pt Arial'; // sets font style
context.fillStyle = 'red'; // sets color for fillRect()
// Square 1
context.shadowOffsetX = 15; // shadow offset 15 pixel to the right
context.shadowOffsetY = 15; // shadow offset 15 pixel to the botttom
context.shadowColor = 'gold'; // sets shadow color
context.shadowBlur = 0; // no blur
context.fillRect (20, 20, 100, 100);
// Square 2
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.shadowColor = 'rgba(0, 0, 0, 0.5)'; // shadow color is black but 50% transparent
context.shadowBlur = 5; // blurred shadow
context.fillRect (250, 20, 100, 100);
</script>
</body>
</html>
2. Shadow for not filled objects (empty objects, frames)
In this section, we present how to add shadows to the empty square drawings.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="400" height="150"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
// General settings
context.font = '40pt Arial'; // sets font style
context.lineWidth = '5'; // sets line width for strokeRect()
context.strokeStyle = 'red'; // sets color for strokeRect()
// Square 1
context.shadowOffsetX = 15; // shadow offset 15 pixel to the right
context.shadowOffsetY = 15; // shadow offset 15 pixel to the bottom
context.shadowColor = 'gold'; // sets shadow color
context.shadowBlur = 0; // no blur
context.strokeRect(20, 20, 100, 100);
// Square 2
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.shadowColor = 'rgba(0,0,0,0.5)'; // shadow color is black but 50% transparent
context.shadowBlur = 5; // blurred shadow
context.strokeRect(250, 20, 100, 100);
</script>
</body>
</html>
3. Shadow for text
In this section, we present how to add shadows to the text on canvas.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="400" height="100"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
// General settings
context.font = '40pt Arial'; // sets the font
context.fillStyle = 'red'; // sets the color for fillText()
// Text 1
context.shadowOffsetX = 15; // sets shadow offset 15 pixel to the right
context.shadowOffsetY = 15; // sets shadow offset 15 pixel to the botttom
context.shadowColor = 'gold'; // sets shadow color
context.shadowBlur = 0; // no shadow blur
context.fillText ('Text 1', 10, 60);
// Text 2
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.shadowColor = 'rgba(0, 0, 0, 0.5)'; // sets shadow color to black but 50% transparent
context.shadowBlur = 5; // sets blurred shadow
context.fillText('Text 2', 200, 60);
</script>
</body>
</html>