HTML5 Game - Canvas Arc

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Arc

Introduction

We can create an HTML5 arc with the arc() method.

It is is defined by a section of the circumference of an imaginary circle.

The imaginary circle is defined by a center point and a radius.

The circumference section is defined by a starting angle, an ending angle, and whether or not the arc is drawn counter-clockwise: 

context.arc(centerX,
            centerY, 
            radius, 
            startingAngle,  
            endingAngle,
            counterclockwise);

The angles start with 0pi at the right of the circle and move clockwise to 3pi/2, pi, pi/2, and then back to 0.

We've used 1.1pi as the starting angle and 1.9pi as the ending angle.

The starting angle and ending angle can be any real number and the angles can overlap themselves.

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
                context.lineWidth = 15;// w w  w .  j a v  a2s . c om
                context.strokeStyle = "black"; // line color
                context.arc(canvas.width / 2, canvas.height / 2 + 40, 80, 1.1 * Math.PI, 1.9 * Math.PI, false);
                context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Related Topics