HTML5 Game - Canvas Circles

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

Introduction

A circle is an arc that ends where it started.

Circles are formed using the arc() function, which takes six parameters: 

arc(x, y, radius, startAngle, endAngle, anticlockwise)
Parameter Meaning
X The x coordinate of the center of the circle.
YThe y coordinate of the center of the circle.
Radius The radius of the circle.
startAngle The position on the circle in radians of the start point for drawing the arc.
endAngle The position on the circle in radians of the endpoint for drawing the arc.
Anticlockwise Indicates whether the arc should be drawn in a clockwise or anticlockwise direction.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        //Draws circles on a canvas.
        window.onload = function() {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");

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

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

                //ATTRIBUTES.
                context.strokeStyle = lineColor;
                context.fillStyle = fillColor;
                context.lineWidth = 8;/* w w  w  .jav a 2s . c o  m*/

                //SHAPE.
                context.beginPath();
                context.arc(xPos, yPos, radius, startAngle, endAngle, false);
                context.fill();
                context.stroke();
            }
        }
    </script>
</head>

<body>


        <canvas id="canvasArea" width="440" height="140" style="border:2px solid black">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>

</body>

</html>

Related Topic