Thuộc tính shadowOffsetY của Canvas HTML

Giới thiệu

Thuộc tính shadowOffsetY của HTML Canvas thiết lập khoảng cách dọc (vertical distance) của bóng đổ so với hình vẽ (tính bằng pixel). Giá trị dương: bóng đổ xuống dưới; âm: bóng đổ lên trên. Kết hợp với shadowOffsetX, shadowBlur, shadowColor.

Cú pháp

context.shadowOffsetY = so_pixel;

Ví dụ minh họa

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 30;
    ctx.shadowOffsetX = 35;
    ctx.shadowOffsetY = 35;
    ctx.shadowColor = "orange";
    ctx.fillStyle = "red";
    ctx.fillRect(150, 60, 280, 250);
  </script>
</body>
</html>

Kết quả hiển thị

Hình chữ nhật đỏ có bóng cam lệch 35px phải và 35px xuống, mờ 30px.