Shadow

Next ❯Filter

To draw a shadow to the stroke/fill paths, shapes, or texts on canvas

  • turned_in_notShadow Related Properties
    • shadowBlur
    • shadowColor
    • shadowOffsetX
    • shadowOffsetY


shadowBlur

Used to set or get the shadow blur, default blur is 0

Syntax - To set the shadow blur

ctx.shadowBlur=number

Syntax - To get the shadow blur

ctx.shadowBlur
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.shadowBlur=20;
ctx.shadowColor="red";
ctx.rect(30,15,140,70);
ctx.fill();
shadowBlursubject
shadowBlurclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.shadowBlur=20;
  ctx.shadowColor="red";
  ctx.rect(30,15,140,70);
  ctx.fill();
</script>
</body>
</html>


shadowColor

Used to set or get the shadow color, default color is '#000000'

Syntax - To set the shadow color

ctx.shadowColor=color

Syntax - To get the shadow color

ctx.shadowColor
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.shadowBlur=20;
ctx.shadowColor="teal";
ctx.rect(30,15,140,70);
ctx.fill();
shadowColorsubject
shadowColorclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.shadowBlur=20;
  ctx.shadowColor="teal";
  ctx.rect(30,15,140,70);
  ctx.fill();
</script>
</body>
</html>


shadowOffsetX

Used to set or get the position of shadow along X-axis in pixels, default value is 0

Syntax - To set the shadow X-axis position

ctx.shadowOffsetX=number

Syntax to get the shadow X-axis position

ctx.shadowOffsetX
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.shadowBlur=10;
ctx.shadowColor="red";
ctx.shadowOffsetX=10;
ctx.rect(30,15,140,70);
ctx.fill();
shadowOffsetXsubject
shadowOffsetXclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.shadowBlur=10;
  ctx.shadowColor="red";
  ctx.shadowOffsetX=10;
  ctx.rect(30,15,140,70);
  ctx.fill();
</script>
</body>
</html>


shadowOffsetY

Used to set or get the position of shadow along Y-axis in pixels, default value is 0

Syntax - To set the shadow Y-axis position

ctx.shadowOffsetY=number

Syntax to get the shadow Y-axis position

ctx.shadowOffsetY
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.shadowBlur=10;
ctx.shadowColor="red";
ctx.shadowOffsetY=10;
ctx.rect(30,15,140,70);
ctx.fill();
shadowOffsetYsubject
shadowOffsetYclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.shadowBlur=10;
  ctx.shadowColor="red";
  ctx.shadowOffsetY=10;
  ctx.rect(30,15,140,70);
  ctx.fill();
</script>
</body>
</html>


  • Filter
❮ Prev Gradient
Next ❯Filter
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯