หลักการซูม Canvas ให้ตรงกับเคอร์เซอร์เมาส์
Canvas จะปรับขนาดจากจุดกำเนิด (origin) ปัจจุบัน ซึ่งค่าเริ่มต้นคือ [0,0] หากต้องการปรับขนาดจากจุดอื่น สามารถใช้ ctx.translate() เพื่อย้ายจุดกำเนิดไปยังตำแหน่งที่ต้องการ
ลำดับขั้นตอนที่ถูกต้อง
- ย้ายจุดกำเนิดไปยังตำแหน่งเมาส์:
ctx.translate(pt.x, pt.y) - ปรับขนาด (ซูม):
ctx.scale(factor, factor) - ย้ายจุดกำเนิดกลับในทิศทางตรงข้าม:
ctx.translate(-pt.x, -pt.y)
ctx.translate(pt.x, pt.y);
ctx.scale(factor, factor);
ctx.translate(-pt.x, -pt.y);วิธีนี้จะทำให้การซูมเกิดขึ้นที่ตำแหน่งเมาส์พอดี ไม่ใช่ที่มุมซ้ายบนของ Canvas
