How to use HTML5 Canvas Semicircle

This article describe about HTML5 Canvas Semicircle.
  • 3474

HTML5 Canvas Semicircle

  • We can use the arc() method for create a Semicircle in HTML5.
  • arc() method is define the ending angle to start angle and add PI.
  • The Semicircle is is create a half circle in anti clock wise.

Syntax

<script>
       context.arc(x, y, radius, startAngle, startAngle + Math.PI, antiClockwise);
</script>

Example

<html>

  <head>

    <style>

      body

 {

        margin: 0px;

        padding: 0px;

      }

      #myCanvas

 {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function ()

 {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

 

            context.beginPath();

            context.arc(170, 45, 50, 0, Math.PI, false);

            context.closePath();

            context.lineWidth = 5;

            context.fillStyle = "#8ED6FF";

            context.fill();

            context.strokeStyle = "black";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="320" height="140"></canvas>

  </body>

</html>

 

Output


 Semicircle.jpg

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here 

© 2020 DotNetHeaven. All rights reserved.