การใช้งาน font-face บน canvas

ตัวอย่างการใช้งาน ใช้งาน font-face บน canvas ซึ่งเราจะไม่สามารถเขียนแบบปกติได้เนื่องจาก browser จะ load font ไม่ทันทำให้เราต้องแก้ไขโดยต้อง create link ขึ้นมาและทำการ set attribute ต่างๆให้กับ tag นี้เหมือนกับที่เราเขียน reference stylesheet ปกติ
ซึ่งการ set attribute ให้กับ element ที่เราสร้างขึ้นสามารถกำหนดได้ 2 แบบคือ
link.rel=’stylesheet’ หรือ link.setAttribute(‘stylesheet’); ตามตัวอย่าง

หลังจากนั้นก็ให้ทำ new Image() ขึ้นมาเพื่อทำการ load font แล้วก็เขียน event onerror ดักไว้ เพราะมันต้องเกิด error แน่นอนเพราะสิ่งที่เรา load ไม่ใช่รูปภาพ แต่เห็น stylesheet หลังจากเกิด error แสดงว่า stylesheet ของเรา load เสร็จเรียบร้อยสามารถทำการวาดลงบน canvas ด้วย method fillText() ได้เลย

สุดท้ายถ้า copy code นี้ไปใช้งานจะยังใช้ไม่ได้ต้องทำการใส่ไว้ใน event onload ของ window ด้วยโดยเขียน

1
2
3
window.onload = function(){
// code ตามตัวอย่าง
}

เท่านี้ก็เป็นอันเสร็จเรียบร้อยสามารถใช้งาน font สวยๆบน canvas ได้แล้ว