Canvas Shadow

❮ PrevNext ❯

How to create shadow

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>
Run

Properties Value

PropertyExplanation
shadowBlurSpecifies the amount of blur applied to shadows.
shadow​ColorSpecifies the color of shadows.
shadow​OffsetXSpecifies the distance that shadows will be offset horizontally.
shadow​OffsetYSpecifies the distance that shadows will be offset vertically.

Reminder

Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Canvas.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author