We can draw text (with no fill) on the canvas, by using strokeText() Method.Basically from this method we can render the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.The default color of the text is black. Syntax:
context.strokeText(text, x, y, maxWidth);
Parameter value:: This method accepts four parameter which are mentioned above and described below:
- text: This parameter specifies the text that will be written on the canvas.
- x: This parameter specifies the horizontal coordinate to start painting the text, relative to the canvas.
- y: This parameter specifies the vertical coordinate to start painting the text, relative to the canvas.
- maxWidth: This parameter specifies the maximum possible text width.
Example 1: Below example illustrate the strokeText() method.
html
<!DOCTYPE html> <html>
<head>
<title>
HTML canvas strokeText() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h4>
HTML canvas strokeText() Method
</h4>
<canvas id="GFG" width="500" height="200">
</canvas>
<script>
var c = document.getElementById("GFG");
var ctx = c.getContext("2d");
ctx.font = "60px Arial";
ctx.strokeStyle = "green";
ctx.strokeText("GeeksforGeeks", 50, 50);
</script>
</center>
</body>
</html>
|
Output:
html
<!DOCTYPE html> <html>
<head>
<title>
HTML canvas strokeText() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h4>
HTML canvas strokeText() Method
</h4>
<canvas id="GFG" width="500" height="200">
</canvas>
<script>
var c = document.getElementById("GFG");
var ctx = c.getContext("2d");
ctx.font = "60px Georgia";
ctx.strokeStyle = "blue";
ctx.strokeText("HTML Canvas", 60, 50);
</script>
</center>
</body>
</html>
|
Output:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Opera
- Safari