Open In App

HTML canvas strokeText() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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: Example 2: 

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: Supported Browsers: The browsers supported by HTML canvas strokeText() Method are listed below:

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


Last Updated : 12 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads