HTML5 Game - Canvas Arcs

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

Introduction

An arc is a section of a virtual circle.

Arcs are formed by the arc() function, which takes six parameters: 

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        window.onload = function() {

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

            //      x    y   rad sAng eAng antiC  line    fill
            //      ---- --- --- ---- ---- -----  ------  -------
            drawArc(60, 15, 40, 0, 180, false, "aqua", "yellow");
            drawArc(150, 70, 60, 0, 100, true, "green", "white");
            drawArc(250, 15, 50, 350, 170, false, "red", "pink");
            drawArc(360, 60, 50, 350, 20, true, "blue", "purple");

            //DRAW arc function.
            function drawArc(xPos, yPos,
                radius,//from  w  w  w.j a v a  2  s  .c o  m
                startAngle, endAngle,
                anticlockwise,
                lineColor, fillColor) {
                //ANGLES in radians.
                let startAngle = startAngle * (Math.PI / 180);
                let endAngle = endAngle * (Math.PI / 180);

                //RADIUS.
                let radius = radius;

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

                //SHAPE.
                context.beginPath();
                context.arc(xPos, yPos,
                    radius,
                    startAngle, endAngle,
                    anticlockwise);
                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>

Related Topic