HTML Canvas - textBaseline Property

The HTML Canvas textBaseline property from the interface CanvasRenderingContext2D is called by the context object to specify the current text baseline to be used to draw the text onto the Canvas element.

Possible input values

The input values accepted by the property are −

S.No	Value & Description
1	top Top of the 'em square' is used as text baseline.
2	middle Middle of the 'em square' is used as text baseline.
3	bottom Bottom of the bounding box is used as text baseline.
4	alphabetic Normal alphabetic baseline is used as the text baseline to draw text onto the Canvas element.
5	ideographic The text baseline is ideographic baseline which is basically used by some language scripts such as Korean, Japanese, and Chinese.
6	hanging The text baseline is hanging baseline which is generally used by some language scripts such as Tibetian, and Indic scripts.

Example 1

The following example demonstrates the 'top' and 'bottom' values of HTML Canvas textBaseline property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textBaseline = "top";
      context.fillText(context.textBaseline, 10, 75);
      context.textBaseline = "bottom";
      context.fillText(context.textBaseline, 90, 75);
   </script>
</body>

Output

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

Example 2

The following program code demonstrates all available textBaseline property values on the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="700" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textBaseline = "top";
      context.strokeText(context.textBaseline, 0, 75);
      context.textBaseline = "hanging";
      context.strokeText(context.textBaseline, 80, 75);
      context.textBaseline = "middle";
      context.strokeText(context.textBaseline, 210, 75);
      context.textBaseline = "alphabetic";
      context.strokeText(context.textBaseline, 310, 75);
      context.textBaseline = "ideographic";
      context.strokeText(context.textBaseline, 450, 75);
      context.textBaseline = "bottom";
      context.strokeText(context.textBaseline, 610, 75);
   </script>
</body>
</html>

Output

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

html_canvas_text.htm