HTML Canvas shadowOffsetY Property - ตั้งค่าระยะห่างเงาแนวตั้ง

คุณสมบัติ shadowOffsetY ของ Canvas 2D Context ใช้กำหนด **ระยะห่างแนวตั้ง (vertical distance)** ของเงาจากรูปทรง หน่วยเป็นพิกเซล ค่าบวก = เงาลงด้านล่าง, ค่าลบ = เงาขึ้นด้านบน

รูปแบบการใช้งาน

ctx.shadowOffsetY = number; // พิกเซล บวกหรือลบได้

คุณสมบัติเงาครบชุด (Shadow Properties)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <canvas id="shadowCanvas" width="600" height="350" style="border:2px solid orange;">
    เบราว์เซอร์ไม่รองรับ Canvas
  </canvas>
  
  <script>
    const canvas = document.getElementById('shadowCanvas');
    const ctx = canvas.getContext('2d');
    
    // ตั้งค่าเงา
    ctx.shadowBlur = 30;
    ctx.shadowOffsetX = 35;   // เงาขยับขวา 35px
    ctx.shadowOffsetY = 35;   // เงาขยับลง 35px
    ctx.shadowColor = "orange";
    
    // วาดสี่เหลี่ยม
    ctx.fillStyle = "red";
    ctx.fillRect(150, 60, 280, 250);
  </script>
</body>
</html>

การเข้าใจพิกัดเงา

// จุดกำเนิด (0,0) อยู่มุมซ้ายบน
// shadowOffsetX > 0  → เงาขยับไปทางขวา (ทิศทางบวกของ X)
// shadowOffsetY > 0  → เงาขยับไปทางล่าง (ทิศทางบวกของ Y)

// ตัวอย่างตำแหน่งเงา:
ctx.shadowOffsetX = 10;  ctx.shadowOffsetY = 10;   // ↘ มุมขวาล่าง (ปกติ)
ctx.shadowOffsetX = -10; ctx.shadowOffsetY = 10;   // ↙ มุมซ้ายล่าง
ctx.shadowOffsetX = 10;  ctx.shadowOffsetY = -10;  // ↗ มุมขวาบน
ctx.shadowOffsetX = -10; ctx.shadowOffsetY = -10;  // ↖ มุมซ้ายบน
ctx.shadowOffsetX = 0;   ctx.shadowOffsetY = 10;   // ↓ ตรงๆ ด้านล่าง
ctx.shadowOffsetX = 10;  ctx.shadowOffsetY = 0;    // → ตรงๆ ด้านขวา

ตัวอย่างหลายรูปทรง พร้อมเงาต่างกัน

<script>
  const ctx = document.getElementById('canvas').getContext('2d');
  
  // วงกลม - เงาเบลอ นุ่ม
  ctx.save();
  ctx.shadowBlur = 20;
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 10;
  ctx.shadowColor = "rgba(0,0,0,0.4)";
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.fillStyle = "#317EFB";
  ctx.fill();
  ctx.restore();
  
  // สี่เหลี่ยม - เงาคม (ไม่เบลอ) สำหรับเอฟเฟกต์ 3D แบบ flat
  ctx.save();
  ctx.shadowBlur = 0;
  ctx.shadowOffsetX = 8;
  ctx.shadowOffsetY = 8;
  ctx.shadowColor = "rgba(0,0,0,0.6)";
  ctx.fillStyle = "#E91E63";
  ctx.fillRect(200, 60, 120, 120);
  ctx.restore();
  
  // ข้อความ - เงาเล็กน้อย เพื่อความคมชัด
  ctx.save();
  ctx.shadowBlur = 2;
  ctx.shadowOffsetX = 1;
  ctx.shadowOffsetY = 1;
  ctx.shadowColor = "rgba(255,255,255,0.8)";
  ctx.font = "bold 32px sans-serif";
  ctx.fillStyle = "#1A237E";
  ctx.fillText("Canvas Shadow", 350, 120);
  ctx.restore();
</script>

เคล็ดลับการใช้งาน

• ใช้ ctx.save() / ctx.restore() เพื่อจัดการสถานะเงาแยกต่างหาก
• สำหรับ text ใช้ CSS text-shadow แทน จะง่ายกว่าและประสิทธิภาพดีกว่า
• shadowOffsetY ติดลบ (negative) ทำให้เงาอยู่ด้านบน - ใช้สร้างเอฟเฟกต์แสงส่องจากด้านล่าง