Canvas Shadow

Last Updated:

How to create shadow

Your browser does not support the canvas element.

To create shadow, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. font - Use font canvas property to specify the current text style to use when drawing text.
  4. shadowOffsetX - Use shadowOffsetX canvas property to specify the distance that shadows will be offset horizontally.
  5. shadowOffsetY - Use shadowOffsetY canvas property to specify the distance that shadows will be offset vertically.
  6. shadowBlur - Use shadowBlur canvas property to specify the amount of blur applied to shadows.
  7. shadowColor - Use shadowColor canvas property to specify the color of shadows.
  8. fillText - Use fillText() canvas method to draw a text string at the specified coordinates, filling the string's characters with the current fillStyle. The default fillStyle color is 'black'.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="160" height="40"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("point"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.fillText("Hello World", 2, 30); </script> </body> </html>

Properties Value

PropertyExplanation
shadowBlur Specifies the amount of blur applied to shadows.
shadow​Color Specifies the color of shadows.
shadow​OffsetX Specifies the distance that shadows will be offset horizontally.
shadow​OffsetY Specifies the distance that shadows will be offset vertically.

Share this Page

Meet the Author