The textBaseline property

The textBaseline property sets how any text that you draw on the canvas is vertically aligned. By using this property you can control the vertical alignment of whatever text you draw on to the canvas. Remember that if you set this property you may need to reset it or change when drawing subsequent text.

Note that the bottom and ideographic may appear to be very similar in their positioning of the text.

Examples of setting the textBaseline property

These are the possible values for the setting. It should be noted that RGraph only uses three of these values - middle, top and bottom.

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        context.textBaseline = 'top';
        // context.textBaseline = 'hanging';
        // context.textBaseline = 'middle';
        // context.textBaseline = 'alphabetic';
        // context.textBaseline = 'ideographic';
        // context.textBaseline = 'bottom';
    
        context.fillText('Some example text', 200, 25);
    }
</script>

See also

• An example of the HTML5 canvas text functionality