Draw Text on canvas in HTML5

 
You can draw the text on the HTML5 canvas, for it we use the following JavaScript method:
 
fillText(text, x, y [,maxWidth]) method fills the text in the current fill style.
strokeText(text, x, y [,maxWidth]) method outlines the text in the current stroke style.
 

Both methods uses the following arguments:

text: The text to draw into the context.
x: The X coordinate at which to begin drawing.
y: The Y coordinate at which to begin drawing.
maxWidth(Optional): the maximum width to draw.
 
we use the font property of the canvas context to set the font of the drawn text that will contains the font style, size, and family name.
 


Draw text on canvas html5

 

Example

The following example will draw the string ‘Welcome’ on the canvas.

<html>
<head>
  <title>Draw text</title>
    <style type="text/css">
        #MyCanvas {border:1px solid black;}
    </style>
  <script type="text/javascript">
      function drawText() {
          var ctx;
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              ctx.font = "15pt verdana";
              ctx.fillText("Welcome", 100, 100);
          }
      }
  </script>
</head>
<body onload="drawText();">
  <canvas id="MyCanvas" width="350" height="200">
  This browser or document mode doesn't support canvas object</canvas>
 </body>
</html>