Adding shadows to HTML5 Canvas

The canvas element supports adding shadows to drawn objects. The following properties are used to create shadows:

  • shadowOffsetX : horizontal offset in pixels to the right (or left if negative)
  • shadowOffsetY : vertical offset in pixels from the bottom (or top if negative)
  • shadowBlur : number of pixels to set shadow blur
  • shadowColor : shadow color
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas in HTML5</title>
</head>

<body>
    <canvas id="myCanvas" width="300" height="200" style="background-color:#eee; border:1px solid #ccc;">
        Your browser does not support Canvas
    </canvas>
    </body>

</html>