Try it Yourself: Canvas Shadows

Canvas Shadows

<!DOCTYPE html>
<html>
<body>

<canvas id="shadowCanvas" width="280" height="180" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("shadowCanvas");
const ctx = canvas.getContext("2d");

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;

ctx.fillStyle = "#e76f51";
ctx.fillRect(60, 40, 180, 100);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="shadowCanvas" width="280" height="180" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("shadowCanvas");
const ctx = canvas.getContext("2d");

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;

ctx.fillStyle = "#e76f51";
ctx.fillRect(60, 40, 180, 100);
</script>

</body>
</html>