Summary -

In this topic, we described about the below sections -

In HTML5, canvas element endorses basic text rendering on a line-by-line basis. The canvas text rendering framework provides two methods fillText() and strokeText() to draw text on canvas.

we can use font property (type:string) to identify several text settings such as size, font, style and weight. The style can be italic, bold and normal. Default style is normal.

Code example of font property - 

ctx.font = ctx.font = 'italic 400 12px, sans-serif';

font-weight "400" doesn't appear because that is the default value.

fillText() method

The fillText() technique is used to render filled text to the canvas by using the existing fill style and font.

This method draws directly to the canvas without altering the existing path, so any following fill() or stroke() calls will have no impact on it.

The text is rendered using the font and text layout design as defined by the font, textAlign, textBaseline, and direction properties.

Syntax -

ctx.fillText(text, x, y, maxWidth)

The following table describes the parameters of the fillText method -

Parameters Type Description
text string The text characters to paint on the canvas.
x number The horizontal coordinate to begin painting the text in pixels, relative to the canvas.
Y number The vertical coordinate to begin painting the text in pixels, relative to the canvas.
maxWidth number The maximum potential text width.

Example -

The following example describes the fillText method.
<!DOCTYPE html>  
<html>
 <body>
    <canvas id="myCanvas" width="400" height="200" 
               style="border:1px solid #f3f3f3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");
          ctx.font = "30px calibri"; 
          ctx.fillText("welcome to the new world",10,50);
    </script>
 </body>
</html

Output:-

Your browser does not support the HTML5 canvas tag.

strokeText

The strokeText() method is used to render the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.

This method draws directly to the canvas without altering the existing path, so any following fill() or stroke() calls will have no impact on it.

Syntax -

ctx.strokeText(text, x, y, maxWidth)

The following table describes the parameters of the strokeText method -

Parameters Type Description
text string The text characters to paint on the canvas.
X number The horizontal coordinate to begin painting the text in pixels, relative to the canvas.
Y number The vertical coordinate to begin painting the text in pixels, relative to the canvas.
maxWidth number The maximum potential text width.

Example -

The following example describes about the strokeText() method.
<!DOCTYPE html>      
<html>           
 <body>                
     <canvas id="myCanvas1" width="400" height="200" 
             style="border:1px solid #f3f3f3;">
            Your browser does not support the HTML5 canvas tag.
     </canvas>
     <script>
         var c = document.getElementById("myCanvas1");
         var ctx = c.getContext("2d");
         ctx.font = "30px calibri";
         ctx.strokeText("welcome to the new world",10,50);
     </script
 </body>
</html>

Output-

Your browser does not support the HTML5 canvas tag.

Browser Support

The following browsers with versions in the table indicates the initial browser version that completely supports the above methods -

Method Chrome Edge Firefox Safari Opera
fillText() & strokeText() Yes 9.0 and above Yes Yes Yes