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 > |
chevron_right
filter_none
Output:
Supported Browsers: The browser supported by HTML canvas fillText() Method are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera