SHARE THIS PAGE

HTML Reference

HTML by Alphabet HTML by Function HTML Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

HTML Tags

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <hgroup> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML canvas textBaseline Property

HTML Canvas Reference

Example

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

JavaScript:

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

//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
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);

Try it yourself »

Browser Support

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

Note: The textBaseline property works differently in 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 illustration below demonstrates the various baselines supported by the textBaseline attribute:

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

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

Property Values

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