This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

textBaseline

Summary

Returns or sets the baseline value. See return value description below.

Property of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.textBaseline;
CanvasRenderingContext2D.textBaseline = value;

Return Value

Returns an object of type StringString

Must be one of the following:

  • “top” - The top of the em square
  • “hanging” - The hanging baseline
  • “middle” - The middle of the em square
  • “alphabetic” - The alphabetic baseline (default)
  • “ideographic” - The ideographic baseline
  • “bottom” - The bottom of the em square

Examples

<canvas id="myCanvas" width="400" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can=document.getElementById("myCanvas");
var ctxt=can.getContext("2d");
//draw a horizontal line across the canvas
ctxt.strokeStyle="green";
ctxt.moveTo(0,75);
ctxt.lineTo(400,75);
ctxt.stroke();
//set the font
ctxt.font="16px Arial"
//show words on the line with different textBaseline values
ctxt.textBaseline="top";
ctxt.fillText("TOP",5,75);
ctxt.textBaseline="bottom";
ctxt.fillText("BOTTOM",50,75);
ctxt.textBaseline="middle";
ctxt.fillText("MIDDLE",120,75);
ctxt.textBaseline="alphabetic";
ctxt.fillText("ALPHABETIC",190,75);
ctxt.textBaseline="hanging";
ctxt.fillText("HANGING",290,75);
</script>

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions