HTML Canvas Text set text base line

Description

HTML Canvas Text set text base line

View in separate window 

<!DOCTYPE HTML> 
<html> 
<head>
<script>  
//Displays text in the center of a canvas.
                     /*from  ww w  .ja  va  2  s  .c om*/
window.onload = function()
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   let mText = "Hi!"
   let xPos  = canvas.width/2;
   let yPos  = canvas.height/2;
   
   context.font         = "90pt Comic Sans MS"; 
   context.fillStyle    = "lime";
   context.textAlign    = "center"; 
   context.textBaseline = "middle";

   // FILL text.
   context.fillText(mText, xPos, yPos);                  
}
</script>
</head>
<body>
<div style="width:200px; height:200px; 
            margin:0 auto; padding:5px;">
<canvas   id     ="canvasArea" 
          width  ="200" height ="200" 
          style  ="border:2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
</div> 
</body> 
</html>



PreviousNext

Related