HTML Canvas Circle draw circle and border

Description

HTML Canvas Circle draw circle and border

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws circles on a canvas.
  window.onload = function() {//  w  ww  .  ja va 2 s.  co m
    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    // CIRCLES.
    //         x    y   rad line     fill
    //         ---- --- --- ------   -------
    drawCircle(60, 15, 40, "aqua", "yellow");
    drawCircle(150, 70, 60, "green", "white");
    drawCircle(250, 15, 50, "red", "pink");
    drawCircle(360, 60, 50, "blue", "purple");

    function drawCircle(xPos, yPos, radius, lineColor, fillColor) {
      // ANGLES in radians.
      let startAngle = 0 * (Math.PI / 180);
      let endAngle = 360 * (Math.PI / 180);

      context.strokeStyle = lineColor;
      context.fillStyle = fillColor;
      context.lineWidth = 8;

      context.beginPath();
      context.arc(xPos, yPos, radius, startAngle, endAngle, false);
      context.fill();
      context.stroke();
    }
  }
</script>
</head>
<body>
  <div style="width: 440px; height: 140px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="440" height="140"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related