8

HTML | canvas fillText() Method

 3 years ago
source link: https://www.geeksforgeeks.org/html-canvas-filltext-method/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
canvas fillText() Method
Related Articles
HTML | canvas fillText() Method
  • Last Updated : 10 Oct, 2019

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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:
Screenshot-2915.png

Supported Browsers: The browser supported by HTML canvas fillText() Method are listed below:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK