HTML reference manual

Complete list of HTML tags

HTML canvas textBaseline attribute

textBaseline is a Canvas 2D API describes the property of the current text baseline when drawing text.

Online example

At y = 10Draw a red line at 0 location, then place each word at y = 10Place different textBaseline values at 0 location:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas textBaseline property usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="4" height="2" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Y　=　10Draw a red line at 0
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Each at y　=　10The words with 0 have 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>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support textBaseline property.

Note:The textBaseline property has different effects on different browsers, especially when using "hanging" or "ideographic".

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

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

The following illustration demonstrates the various baselines supported by the textBaseline attribute:

Note:fillText() andstrokeText() The method uses the specified textBaseline value when positioning text on the canvas.

Default value:	alphabetic
JavaScript syntax:	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

Attribute value

Value	Description
alphabetic	Default. The text baseline is the standard letter baseline.
top	The text baseline is at the top of the em box.
hanging	The text baseline is the hanging baseline.
middle	The text baseline is the center of the em box.
ideographic	The text baseline is the ideographic baseline.
bottom	The text baseline is at the bottom of the em box.

HTML canvas reference manual

HTML: <template> tag