HTML Canvas Line compare lineCap values

Description

HTML Canvas Line compare lineCap values

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws lines on a canvas.

  window.onload = function() {//  w w  w  . j a  v a2 s  . c  om

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

    // VARIABLES.
    let width = 60;
    let height = 75;
    let gap = 50;

    // ATTRIBUTES of lines.
    context.strokeStyle = "red";
    context.lineWidth = 20;
    context.shadowOffsetX = 4;
    context.shadowOffsetY = 4;
    context.shadowBlur = 7;
    context.shadowColor = "gray";

    // DRAW lines.
    //       xStart yStart cap
    //       ------ ------ -------
    drawLine(25, 25, "butt");
    drawLine(25, 75, "square");
    drawLine(25, 125, "round");

    // DRAW joins.
    //       xStart                 yStart join
    //       ---------------------  ------ -------
    drawJoin(175 + (0 * gap) + (0 * width), 120, "miter");
    drawJoin(175 + (1 * gap) + (1 * width), 120, "bevel");
    drawJoin(175 + (2 * gap) + (2 * width), 120, "round");

    // LINE DRAWING function.
    function drawLine(xStart, yStart, cap) {
      // ATTRIBUTES of lines.
      context.lineCap = cap;

      // DRAW lines.
      context.beginPath();
      context.moveTo(xStart, yStart);
      context.lineTo(xStart + 1.5 * width, yStart);
      context.stroke();
    }
    // LINE JOINING function.
    function drawJoin(xStart, yStart, join) {
      // ATTRIBUTES of lines.
      context.lineCap = "round";

      // DRAW lines.
      context.beginPath();
      context.moveTo(xStart, yStart);
      context.lineTo(xStart + (width / 2), yStart - height);
      context.lineTo(xStart + width, yStart);
      context.lineJoin = join;
      context.stroke();
    }
  }
</script>
</head>
<body>
  <div style="width: 500px; height: 160px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="500" height="160"
      style="border: 2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related