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.
In this section, we present how to add shadows to the filled square drawings.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="400" height="150"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
// General settings18
context.font = '40pt Arial'; // sets font style19
context.fillStyle = 'red'; // sets color for fillRect()20
21
// Square 122
context.shadowOffsetX = 15; // shadow offset 15 pixel to the right23
context.shadowOffsetY = 15; // shadow offset 15 pixel to the botttom24
context.shadowColor = 'gold'; // sets shadow color25
context.shadowBlur = 0; // no blur26
context.fillRect (20, 20, 100, 100);27
28
// Square 229
context.shadowOffsetX = 15;30
context.shadowOffsetY = 15;31
context.shadowColor = 'rgba(0, 0, 0, 0.5)'; // shadow color is black but 50% transparent32
context.shadowBlur = 5; // blurred shadow33
context.fillRect (250, 20, 100, 100);34
35
</script>36
</body>37
</html>In this section, we present how to add shadows to the empty square drawings.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="400" height="150"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
// General settings18
context.font = '40pt Arial'; // sets font style19
context.lineWidth = '5'; // sets line width for strokeRect()20
context.strokeStyle = 'red'; // sets color for strokeRect()21
22
// Square 123
context.shadowOffsetX = 15; // shadow offset 15 pixel to the right 24
context.shadowOffsetY = 15; // shadow offset 15 pixel to the bottom25
context.shadowColor = 'gold'; // sets shadow color 26
context.shadowBlur = 0; // no blur 27
context.strokeRect(20, 20, 100, 100);28
29
// Square 230
context.shadowOffsetX = 15; 31
context.shadowOffsetY = 15; 32
context.shadowColor = 'rgba(0,0,0,0.5)'; // shadow color is black but 50% transparent33
context.shadowBlur = 5; // blurred shadow34
context.strokeRect(250, 20, 100, 100); 35
36
</script>37
</body>38
</html>In this section, we present how to add shadows to the text on canvas.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="400" height="100"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
// General settings18
context.font = '40pt Arial'; // sets the font19
context.fillStyle = 'red'; // sets the color for fillText()20
21
// Text 1 22
context.shadowOffsetX = 15; // sets shadow offset 15 pixel to the right23
context.shadowOffsetY = 15; // sets shadow offset 15 pixel to the botttom24
context.shadowColor = 'gold'; // sets shadow color25
context.shadowBlur = 0; // no shadow blur26
context.fillText ('Text 1', 10, 60);27
28
// Text 2 29
context.shadowOffsetX = 15;30
context.shadowOffsetY = 15;31
context.shadowColor = 'rgba(0, 0, 0, 0.5)'; // sets shadow color to black but 50% transparent32
context.shadowBlur = 5; // sets blurred shadow33
context.fillText('Text 2', 200, 60);34
35
</script>36
</body>37
</html>