<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>
#c {
border: 1px solid;
display: block;
width: 800px;
height: 600px;
margin: 0 auto;
}
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();
}
2 rectangles & 2 cicles

Shadows attributes

context.shadowColor = "red";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 1;
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();
4 elements with shadows

Result

Thank you for your attention.

Senior web developer, architect, cryptocurrencies trader, https://lytvynov-anton.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store