How to use HTML5 Canvas Text Base Line

This article describe about HTML5 Canvas Text Base Line.
  • 2001

HTML5 Canvas Text Base Line 

  • Text base line is defined HTML5 canvas.
  • So text baseline set following values in HTML5: top, middle, hanging, alphabetic, ideographic, and bottom.
  • The text baseline method is a alphabetic.


       context.textBaseline = 'middle';






      body {

        margin: 0px;

        padding: 0px;


      #myCanvas {

        border: 1px solid #9C9898;




        window.onload = function () {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

            var x = canvas.width / 2;

            var y = canvas.height / 2;


            context.font = "30pt Calibri";   

            context.textAlign = "center";

            context.textBaseline = "middle";

            context.fillStyle = "red";

            context.fillText("I am canvas!", x, y);






    <canvas id="myCanvas" width="400" height="170"></canvas>





text base line.jpg

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.