HTML Canvas Text Clip

Description

HTML Canvas Text Clip

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  window.onload = function() {// ww w . j a v  a  2s. com

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

    let mText = "Hi there!"
    let xPos = canvas.width / 2;
    let yPos = canvas.height / 2;

    context.font = "60pt Comic Sans MS";
    context.fillStyle = "hotpink";
    context.textAlign = "center";
    context.textBaseline = "middle";

    // CLIPPING region.
    context.rect(50, 60, 310, 40);
    context.clip();

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



PreviousNext

Related