HTML Canvas Text set base line and compare various values

Description

HTML Canvas Text set base line and compare various values

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: text baseline
  window.onload = function() {//from   w  w w  .  ja v a  2  s .  co m

    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    // TEXT variables.
    let xPos = 75;
    let yPos = canvas.height / 2;

    // ATTRIBUTES.
    context.font = "10pt Arial";
    context.fillStyle = "black";
    context.textAlign = "right";
    context.strokeStyle = "hotpink";
    context.lineWidth = 1;

    // BASELINE.
    context.beginPath();
    context.moveTo(0, yPos);
    context.lineTo(canvas.width, yPos);
    context.stroke();

    // TEXT BASELINE examples.
    context.textBaseline = "top";
    context.fillText("|top", xPos * 1, yPos);
    context.textBaseline = "hanging";
    context.fillText("|hanging", xPos * 2, yPos);
    context.textBaseline = "middle";
    context.fillText("|middle", xPos * 3, yPos);
    context.textBaseline = "alphabetic";
    context.fillText("|alphabetic", xPos * 4, yPos);
    context.textBaseline = "ideographic";
    context.fillText("|ideographic", xPos * 5, yPos);
    context.textBaseline = "bottom";
    context.fillText("|bottom", xPos * 6, yPos);
  }
</script>
</head>
<body>
  <div style="width: 500px; height: 50px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="500" height="50"
      style="border: 2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related