HTML Canvas Path build custom shape

Description

HTML Canvas Path build custom shape

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws a multi-sided shape on a canvas.

  window.onload = function() {//from   w  w w  .  j  a va 2s. c o m

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

    // ATTRIBUTES of shapes.
    context.strokeStyle = "black";
    context.lineWidth = 4;
    context.lineCap = "round"
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 5;
    context.shadowColor = "gray";

    // SHAPE 1.
    let xPos = 50;
    let yPos = 40;
    let fLength = 20;
    let cLength = 2;
    let color = "blue"
    drawShape(xPos, yPos, fLength, cLength, color);

    // SHAPE 2.
    xPos = 150;
    yPos = 40;
    fLength = 20;
    cLength = 4;
    color = "green"
    drawShape(xPos, yPos, fLength, cLength, color);

    // SHAPE 3.
    xPos = 100;
    yPos = 125;
    fLength = 20;
    cLength = .5;
    color = "purple"
    drawShape(xPos, yPos, fLength, cLength, color);

    // DRAW shape function.
    function drawShape(xPos, yPos, fLength, cLength, color) {
      // CALCULATE short length.
      let sLength = fLength / cLength;

      // PATH segments.
      context.beginPath();
      context.moveTo(xPos - (sLength), yPos - (fLength));
      context.lineTo(xPos + (sLength), yPos - (fLength));
      context.lineTo(xPos + (fLength), yPos - (sLength));
      context.lineTo(xPos + (fLength), yPos + (sLength));
      context.lineTo(xPos + (sLength), yPos + (fLength));
      context.lineTo(xPos - (sLength), yPos + (fLength));
      context.lineTo(xPos - (fLength), yPos + (sLength));
      context.lineTo(xPos - (fLength), yPos - (sLength));
      context.lineTo(xPos - (sLength), yPos - (fLength));

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



PreviousNext

Related