Skip to content
Related Articles

Related Articles

HTML | canvas strokeText() Method
  • Last Updated : 22 Aug, 2019
GeeksforGeeks - Summer Carnival Banner

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 strokeTex() method.




<!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:




<!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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :