Cách vẽ văn bản với fillText() trong HTML5

Để vẽ văn bản tô đầy (filled text) lên canvas trong HTML5, bạn sử dụng phương thức fillText(). Phương thức này tô màu văn bản tại vị trí được chỉ định bởi tọa độ x và y. Màu mặc định là đen.

Cú pháp

fillText(text, x, y [, maxWidth])

Tham số

STT	Tham số	Mô tả
1	text	Văn bản cần viết
2	x	Tọa độ x
3	y	Tọa độ y
4	maxWidth	Chiều rộng tối đa cho phép (pixel)

Ví dụ

Bạn có thể chạy mã sau để vẽ văn bản với fillText() trong 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>