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

Để vẽ văn bản lên canvas trong HTML5, bạn sử dụng phương thức strokeText(). Phương thức này vẽ viền của 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

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

Tham số

STT	Tham số	Mô tả
1	text	Văn bản cần vẽ
2	x	Tọa độ x nơi bắt đầu vẽ
3	y	Tọa độ y nơi bắt đầu vẽ
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 strokeText() trong HTML5:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas strokeText()</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.strokeText("Tutorialspoint", 10, 50);
      ctxt.fillStyle = '#Cff765';
      ctxt.font = "30px Verdana";
      ctxt.strokeText("Simply Easy Learning!", 10, 90);
    </script>
  </body>
</html>