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.

Do you need help with web or mobile development? Feel free to contact me here.

P.S. I really appreciate your like or share 🙏.

HTML5 Canvas Shadows

Shadows attributes

Result

Thank you for your attention.

Written by Anton Lytvynov