Wulin.com (www.vevb.com) Article introduction: HTML canvas vertically aligned text, we can use the attribute value of textBaseline within the canvas range. textBaseline can set one of the following values: top, hanging, middle, alphabetic, ideagraphic, and bottom. Unless otherwise specified, the textBaseline attribute defaults to letters.
HTML canvas vertically aligned text, we can use the textBaseline property value within the canvas range. textBaseline can set one of the following values: top, hanging, middle, alphabetic, ideagraphic, and bottom. Unless otherwise specified, the textBaseline attribute defaults to letters.
<!DOCTYPE HTML>
<html>
<head>
<title>html5_canvas_text_baseline</title>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style>
<script>
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;
// textAlign aligns text horizontally relative to placement
context.textAlign = center;
// textBaseline aligns text vertically relative to font style
context.textBaseline = middle;
context.fillStyle = blue;
context.fillText(Hello World!, x, y);
};
</script>
</head>
<body>
<canvas id=myCanvas width=578 height=200>
</canvas>
</body>
</html>