หมุนรูปภาพบน HTML5 Canvas จากมุมกึ่งกลางด้านล่าง (Bottom Center)

ลำดับ Transform: Translate -> Rotate -> Draw

จุดหมุน (Origin) ต้องอยู่ที่ Bottom Center ของรูป

var ctx = canvas.getContext('2d');
var img = document.getElementById('myImage'); // สมมติ width=64, height=120

// 1. ย้าย Origin ไปที่ Bottom Center ของรูป (32, 120)
ctx.translate(32, 120);

// 2. หมุน (เช่น 90 องศา)
ctx.rotate(90 * Math.PI / 180);

// 3. วาดรูป โดยปรับตำแหน่งให้ Center ตรง Origin
// drawImage(image, dx, dy, dw, dh) - dx,dy คือมุมซ้ายบนของรูปปลายทาง
// เราต้องการให้ Bottom Center ของรูป อยู่ที่ (0,0) ของ Canvas ปัจจุบัน
// ดังนั้น dx = -width/2, dy = -height
ctx.drawImage(img, -32, -120, 64, 120);

หลักการ: translate ย้ายจุดหมุน rotate หมุนรอบจุดหมุน drawImage วาดด้วย Offset ให้จุดที่ต้องการอยู่ตรง Origin