HTML canvas textBaseline Property

Introduction

Draw a red line at y=100, then place each word at y=100 with different textBaseline values:

View 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);/* w w w  . j  a  v  a 2s .  c  om*/
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>

The textBaseline property sets or gets the current text baseline used when drawing text.

The fillText() and strokeText() methods will use the specified textBaseline value when positioning the text on the canvas.

The textBaseline property Default value: alphabetic 


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



PreviousNext

Related