Get your own website Result Size: 625 x 565
×
Change Orientation Save Code Change Theme, Dark/Light Go to Spaces
​x
 
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The textBaseline Property</h2>
​
<canvas id="myCanvas" width="400" height="200" style="border:1px solid grey"></canvas>
​
<script>
const c = document.getElementById("myCanvas");
const 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); 
</script>
​
</body>
</html>
​