HTML Canvas Rounded corner

Description

HTML Canvas Rounded corner

View in separate window 

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

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

    let xPos = 25;
    let yPos = 25;
    let width = 150;
    let height = 75;
    let radius = 30;

    context.strokeStyle = "red";
    context.lineWidth = 20;
    context.lineCap = "square"
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 5;
    context.shadowColor = "gray";

    // STARTING point.
    context.beginPath();
    context.moveTo(xPos, yPos);

    // TOP line path.
    context.lineTo(xPos + width - radius, yPos);

    // CORNER arc path.
    context.arcTo(xPos + width, yPos, xPos + width, yPos + radius, radius);

    // SIDE line path.
    context.lineTo(xPos + width, yPos + height);

    context.stroke();
  }
</script>
</head>
<body>
  <div style="width: 200px; height: 125px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="200" height="125"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related