HTML Canvas - strokeText() Method

Quiz

The HTML Canvas strokeText() method of the CanvasRenderingContext2D interface is called by the context object to stroke text onto the Canvas element.

Syntax

Following is the syntax of HTML Canvas strokeText() method −

CanvasRenderingContext2D.strokeText(text, x, y, text_width);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	text The text string to be rendered onto the Canvas element.
2	x x co-ordinate of the point from which text is to be drawn in the Canvas element.
3	y y co-ordinate of the point from which text is to be drawn in the Canvas element.
4	text_width Width of the text to be drawn in pixels.

Return values

The method strokeText() adds strokes to the text and renders it on the Canvas element.

Example 1

The following example adds strokes to a letter to the Canvas element using HTML Canvas strokeText() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = '30px Verdana'
      context.strokeText('C', 20, 50);
      context.strokeText('A', 100, 50);
      context.strokeText('T', 180, 50);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example 2

The following example adds strokes to a word which is in the Canvas element at the specified co-ordinates as passed by parameters using the method strokeText().

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = '30px Verdana'
      context.strokeText('This is a stroked text.', 35, 50);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_text.htm

Print Page