HTML Canvas arc

Introduction

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);

View in separate window 


<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                context.lineWidth = 15;//from   w ww.  j a  va2  s. 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>

Another method for creating arcs with the HTML5 canvas is to make use of the arcTo() method.

The resulting arc from the arcTo() method is defined by the context point, a control point, an ending point, and a radius: 

context.arcTo(controlPointX1, 
              controlPointY1, 
              endingPointX,    
              endingPointY, 
              radius);



PreviousNext

Related