HTML canvas textBaseline Property

Example

// Accessing the element
let c = document.getElementById("myCanvas");

let ctx = c.getContext("2d");

ctx.strokeStyle = "red";
ctx.moveTo(0, 75);
ctx.lineTo(150, 75);
ctx.stroke();

ctx.font = "6px monaco"

ctx.textBaseline = "top";
ctx.fillText("Top", 0, 75);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 25, 75);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 50, 75);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 75, 75);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 125, 75);

Try this code ❯

Meaning

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

Standard Syntax

Default value:

alphabetic

JavaScript syntax:

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

Property Values

Value	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.