HTML5 Canvas Shadows
2 min readApr 20, 2021
How to add shadows to your Canvas Elements?
In this lesson we learn how to add shadows to our lessons.
Our Html code with script.js & style.css
<html lang="en">
<head>
<title>Canvas Shadows</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>
<script src="script.js"></script>
</body>
</html>Styles.css
#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}And we start with 4 elements we ll use later
window.onload = function () {
let canvas = document.getElementById('c');
let context = canvas.getContext("2d");
let radian = Math.PI / 180;
context.beginPath();
context.strokeStyle = "green";
context.fillStyle = "green";
context.rect(100, 100, 100, 100);
context.stroke();
context.fill();
context.beginPath();
context.strokeStyle = "blue";
context.fillStyle = "blue";
context.rect(300, 100, 100, 100);
context.stroke();
context.fill();
context.beginPath();
context.strokeStyle = "red";
context.fillStyle = "red";
context.arc(150, 300, 50, 0, 360 * radian, false);
context.stroke();
context.fill();
context.beginPath();
context.strokeStyle = "orange";
context.fillStyle = "orange";
context.arc(350, 300, 50, 0, 360 * radian, false);
context.stroke();
context.fill();
}
Shadows attributes
To add and change the shadow effects we can play with4 parameters : color, offset by X, offset by Y, blur
context.shadowColor = "red";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 1;Let’s play with our elements
context.beginPath();
context.strokeStyle = "green";
context.fillStyle = "green";
context.rect(100, 100, 100, 100);
context.stroke();
context.shadowColor = "red";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 1;
context.fill();
context.beginPath();
context.strokeStyle = "blue";
context.fillStyle = "blue";
context.rect(300, 100, 100, 100);
context.shadowColor = "orange";
context.shadowOffsetX = -5;
context.shadowOffsetY = -5;
context.shadowBlur = 1;
context.stroke();
context.fill();
context.beginPath();
context.strokeStyle = "red";
context.fillStyle = "red";
context.shadowColor = "black";
context.shadowOffsetX = 100;
context.shadowOffsetY = 50;
context.shadowBlur = 10;
context.arc(150, 300, 50, 0, 360 * radian, false);
context.stroke();
context.fill();
context.beginPath();
context.strokeStyle = "orange";
context.fillStyle = "orange";
context.shadowColor = "red";
context.shadowOffsetX = -5;
context.shadowOffsetY = -5;
context.shadowBlur = 4;
context.arc(350, 300, 50, 0, 360 * radian, false);
context.stroke();
context.fill();
Result
You can check the code for this part here.
Thank you for your attention.
Thank you for your attention.
Do you need help with web or mobile development? Feel free to contact me here.
P.S. I really appreciate your like or share 🙏.
