HTML Canvas Text Display text in the center of canvas

Description

HTML Canvas Text Display text in the center of canvas

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  window.onload = function() {/*ww  w  . j ava2 s.  c o m*/

    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";

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



PreviousNext

Related