Languages
[Edit]
EN

JavaScript - draw shadow

0 points
Created by:
Ela-Davey
453

In this article, we would like to show you how to draw shadow on HTML canvas element using JavaScript.

To add shadow to drawings we use the following properties:

  1. shadowOffsetX - specifies the distance in pixels that shadows will be offset horizontally,
  2. shadowOffsetY - specifies the distance in pixels that shadows will be offset vertically,
  3. shadowColor - specifies the color of the shadow,
  4. shadowBlur - specifies the amount of blur applied to shadow.

1. Shadow for filled objects

In this section, we present how to add shadows to the filled square drawings.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="400" height="150"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // General settings
    context.font = '40pt Arial';   // sets font style
    context.fillStyle = 'red';     // sets color for fillRect()

    // Square 1
    context.shadowOffsetX = 15;    // shadow offset 15 pixel to the right
    context.shadowOffsetY = 15;    // shadow offset 15 pixel to the botttom
    context.shadowColor = 'gold';  // sets shadow color
    context.shadowBlur = 0;        // no blur
    context.fillRect (20, 20, 100, 100);

    // Square 2
    context.shadowOffsetX = 15;
    context.shadowOffsetY = 15;
    context.shadowColor = 'rgba(0, 0, 0, 0.5)';   // shadow color is black but 50% transparent
    context.shadowBlur = 5;                       // blurred shadow
    context.fillRect (250, 20, 100, 100);

  </script>
</body>
</html>

2. Shadow for not filled objects (empty objects, frames)

In this section, we present how to add shadows to the empty square drawings.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="400" height="150"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // General settings
    context.font = '40pt Arial';   // sets font style
    context.lineWidth = '5';       // sets line width for strokeRect()
    context.strokeStyle = 'red';   // sets color for strokeRect()

    // Square 1
    context.shadowOffsetX = 15;     // shadow offset 15 pixel to the right  
    context.shadowOffsetY = 15;     // shadow offset 15 pixel to the bottom
    context.shadowColor = 'gold';   // sets shadow color     
    context.shadowBlur = 0;         // no blur     
    context.strokeRect(20, 20, 100, 100);

    // Square 2
    context.shadowOffsetX = 15;                
    context.shadowOffsetY = 15;                
    context.shadowColor = 'rgba(0,0,0,0.5)'; // shadow color is black but 50% transparent
    context.shadowBlur = 5;                  // blurred shadow
    context.strokeRect(250, 20, 100, 100);  

  </script>
</body>
</html>

3. Shadow for text

In this section, we present how to add shadows to the text on canvas.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="400" height="100"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    // General settings
    context.font = '40pt Arial';  // sets the font
    context.fillStyle = 'red';    // sets the color for fillText()
    
    // Text 1  
    context.shadowOffsetX = 15;     // sets shadow offset 15 pixel to the right
    context.shadowOffsetY = 15;     // sets shadow offset 15 pixel to the botttom
    context.shadowColor = 'gold';   // sets shadow color
    context.shadowBlur = 0;         // no shadow blur
    context.fillText ('Text 1', 10, 60);
    
    // Text 2 
    context.shadowOffsetX = 15;
    context.shadowOffsetY = 15;
    context.shadowColor = 'rgba(0, 0, 0, 0.5)';  // sets shadow color to black but 50% transparent
    context.shadowBlur = 5;                      // sets blurred shadow
    context.fillText('Text 2', 200, 60);

  </script>
</body>
</html>

References

  1. shadowOffsetX - Web APIs | MDN
  2. shadowOffsetY - Web APIs | MDN
  3. shadowColor - Web APIs | MDN
  4. shadowBlur - Web APIs | MDN

Alternative titles

  1. JavaScript - how to draw shadow on HTML canvas element
  2. JavaScript - how to add shadows to drawings on HTML canvas element
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

JavaScript - HTML5 canvas tutorial

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join