ในการวาดข้อความที่เติมบนผืนผ้าใบใน HTML5 ให้ใช้เมธอด fillText() นี่คือไวยากรณ์ของเมธอด fillText() เติมข้อความที่กำหนดในตำแหน่งที่ระบุโดยพิกัดที่กำหนด x และ y สีเริ่มต้นคือสีดำ
fillText(text, x, y [, maxWidth ] )
นี่คือค่าพารามิเตอร์ของเมธอด fillText():
| S. ไม่ | พารามิเตอร์ | คำอธิบาย |
| 1 | text | ข้อความที่จะเขียน |
| 2 | x | x พิกัด |
| 3 | y | y พิกัด |
| 4 | maxWidth | ความกว้างสูงสุดที่อนุญาต หน่วยเป็นพิกเซล |
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อวาดข้อความด้วย fillText() ใน HTML5:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas fillText()</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
ctxt.fillStyle = '#00F';
ctxt.font = "20px Georgia";
ctxt.fillText("Tutorialspoint", 10, 50);
ctxt.fillStyle = '#Cff765';
ctxt.font = "30px Verdana";
ctxt.fillText("Simply Easy Learning!", 10, 90);
</script>
</body>
</html> 