HTML Canvas shadowOffsetY Property: Setting Shadow Offset

HTML Canvas shadowOffsetY Property: Setting Shadow Offset

The HTML Canvas shadowOffsetY property is a key tool for controlling the vertical offset of shadows in your canvas drawings. This property allows you to move shadows up or down from the drawn shape, adding depth and visual interest to your graphics. Understanding and using this property is essential for creating effective and visually appealing effects on your canvas.

What is the shadowOffsetY Property?

The shadowOffsetY property specifies the vertical distance the shadow is offset from the shape. A positive value moves the shadow downwards, while a negative value moves the shadow upwards. The value is measured in pixels.

Purpose of the shadowOffsetY Property

The primary purpose of the shadowOffsetY property is to:

• Control the vertical position of a shadow.
• Create the illusion of a light source being above or below an object.
• Enhance the depth and dimensionality of your canvas drawings.
• Produce varied shadow effects by adjusting the offset.

Syntax of the shadowOffsetY Property

The shadowOffsetY property is set directly on the 2D rendering context of the canvas. Here's the syntax:

ctx.shadowOffsetY = value;

• ctx: The 2D rendering context of the canvas.
• value: A number representing the vertical offset of the shadow in pixels. Positive values move the shadow down, negative values move the shadow up.

Examples of Using shadowOffsetY

Let's explore some examples to demonstrate how the shadowOffsetY property works in practice. Each example will include the HTML and JavaScript code along with the rendered output.

Basic Shadow Offset

In this example, we draw a rectangle with a shadow that is offset 10 pixels vertically downwards.

<canvas
  id="canvasShadowOffsetYBasic"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_basic = document.getElementById("canvasShadowOffsetYBasic");
  const ctx_basic = canvas_basic.getContext("2d");

  ctx_basic.shadowColor = "gray";
  ctx_basic.shadowBlur = 5;
  ctx_basic.shadowOffsetX = 0;
  ctx_basic.shadowOffsetY = 10;

  ctx_basic.fillStyle = "lightblue";
  ctx_basic.fillRect(50, 30, 100, 80);

//]]]]><![CDATA[>
</script>

Shadow Offset Upwards

Here, we draw a circle with a shadow that is offset 10 pixels vertically upwards.

<canvas
  id="canvasShadowOffsetYUp"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_up = document.getElementById("canvasShadowOffsetYUp");
  const ctx_up = canvas_up.getContext("2d");

  ctx_up.shadowColor = "gray";
  ctx_up.shadowBlur = 5;
  ctx_up.shadowOffsetX = 0;
  ctx_up.shadowOffsetY = -10;

  ctx_up.beginPath();
  ctx_up.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx_up.fillStyle = "lightgreen";
  ctx_up.fill();

//]]]]><![CDATA[>
</script>

Varying Shadow Offset

This example shows different shadows with different shadowOffsetY values, demonstrating the versatility of this property.

<canvas
  id="canvasShadowOffsetYVary"
  width="400"
  height="200"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_vary = document.getElementById("canvasShadowOffsetYVary");
  const ctx_vary = canvas_vary.getContext("2d");

  const shapes = [
    { x: 50, y: 50, offset: -20, color: "lightcoral" },
    { x: 150, y: 50, offset: 0, color: "lightblue" },
    { x: 250, y: 50, offset: 20, color: "lightgoldenrodyellow" },
    { x: 350, y: 50, offset: 40, color: "lightseagreen" },
  ];

  shapes.forEach((shape) => {
    ctx_vary.shadowColor = "gray";
    ctx_vary.shadowBlur = 5;
    ctx_vary.shadowOffsetX = 0;
    ctx_vary.shadowOffsetY = shape.offset;

    ctx_vary.fillStyle = shape.color;
    ctx_vary.fillRect(shape.x, shape.y, 50, 50);
  });

//]]]]><![CDATA[>
</script>

Combining with shadowOffsetX

Let's see how shadowOffsetY works with shadowOffsetX. This will give a 2d displacement effect to the shadows

<canvas
  id="canvasShadowOffsetXY"
  width="200"
  height="200"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_xy = document.getElementById("canvasShadowOffsetXY");
  const ctx_xy = canvas_xy.getContext("2d");

  ctx_xy.shadowColor = "gray";
  ctx_xy.shadowBlur = 5;
  ctx_xy.shadowOffsetX = 10;
  ctx_xy.shadowOffsetY = 10;

  ctx_xy.fillStyle = "orange";
  ctx_xy.fillRect(50, 50, 100, 100);

//]]]]><![CDATA[>
</script>

Practical Uses

• Creating 3D Effects: Combine with shadowOffsetX to create the illusion of depth and perspective.
• Highlighting Elements: Use a slight offset to make elements appear raised from the canvas surface.
• Stylistic Shadows: Add more visual flair by using custom colors and offsets.

Important Notes

• Performance: Excessive use of shadows with high blur values can impact performance, especially on complex canvases. Use shadows judiciously for best results. ⚠️
• Resetting Shadows: To disable shadows, set all shadow properties to 0 or their default values.
• Cumulative Effects: Shadow properties affect all drawing operations after they are set until they are modified or reset.

Conclusion

The HTML Canvas shadowOffsetY property is a powerful tool for adding depth and dimension to your canvas graphics. By mastering the shadowOffsetY along with its complementary properties like shadowOffsetX, shadowBlur and shadowColor, you can create stunning visual effects. Experiment with various offset values to achieve the desired shadow effect for your projects and elevate the overall visual appeal of your web applications. 🎨