textBaseline Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:textBaseline

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. textBaseline

Description

The textBaseline property sets or gets the current text baseline.

Default value is alphabetic.

JavaScript syntax 

context.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";

Property Values

Values Description
alphabetic Default. The text baseline is the normal alphabetic baseline
top The text baseline is the top of the em square
hanging The text baseline is the hanging baseline
middle The text baseline is the middle of the em square
ideographic The text baseline is the ideographic baseline
bottom The text baseline is the bottom of the bounding box

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Draw a red line at y=100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);/*from  w w w  . jav a  2 s  .c o  m*/
ctx.lineTo(395, 100);
ctx.stroke();

ctx.font = "20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline = "top";
ctx.fillText("Top", 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 50, 100);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 120, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 190, 100);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 290, 100);

</script>

</body>
</html>

Related Tutorials