Shadows

A path can be visually enhanced using shadows with the 2D context object. A shadow is an area around the path with an offset, color and specified blurring. For this you can specify a shadowColor, shadowOffsetX, shadowOffsetY and a shadowBlur. All of this needs to be defined using the 2D context. The 2D context is your only API to the drawing operations.

A shadow can also be used to create a glow effect around a path. In the next example, we create a text “Canvas” with a white glow around. All this on a dark background for better visibility.

First, we draw the dark background:

  1. // setup a dark background
  2. ctx.strokeStyle = "#333"
  3. ctx.fillRect(0,0,canvas.width,canvas.height);

then we define our shadow configuration, which will be used for the next path:

  1. // setup a blue shadow
  2. ctx.shadowColor = "#2ed5fa";
  3. ctx.shadowOffsetX = 2;
  4. ctx.shadowOffsetY = 2;
  5. ctx.shadowBlur = 10;

Finally, we draw our “Canvas” text using a large bold 80px font from the Ubuntu font family.

  1. // render green text
  2. ctx.font = 'bold 80px sans-serif';
  3. ctx.fillStyle = "#24d12e";
  4. ctx.fillText("Canvas!",30,180);

image