HTML | canvas fillText() Method
The fillText() method is used to draw filled text on the canvas. The default color of the text is black.
Syntax:
context.fillText(text, x, y, maxWidth);
Parameters:
- text: This parameter specifies the text to be written on the canvas.
- x: This parameter specifies the x-coordinate from where to start the text.
- y: This parameter specifies the y-coordinate from where to end the text.
- maxWidth: This parameter specifies the maximum width allowed to the text. It is optional.
Example 1:
<!DOCTYPE html><html> <head> <title> HTML canvas fillText() Method </title></head> <body style="text-align:left;"> <h1>GeeksforGeeks</h1> <h2>HTML canvas fillText() Method</h2> <canvas id="GFG" width="500" height="200" style="border:2px solid"> </canvas> <script> var doc_id = document.getElementById("GFG"); var context = doc_id.getContext("2d"); context.font = "bold 30px solid"; context.fillText("GeeksforGeeks", 180, 100); // Create gradient var grad = context.createLinearGradient(0, 0, doc_id.width, 0); grad.addColorStop("0", "green"); grad.addColorStop("0.5", "white"); grad.addColorStop("1.0", "green"); // Fill with gradient context.fillStyle = grad; context.fillText("GeeksforGeeks", 180, 120); </script></body> </html> |
Output:
Supported Browsers: The browser supported by HTML canvas fillText() Method are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera
.png)
