CODEWITHSUNDEEP
javascripthtmlcanvas
DarthOpto
DarthOpto

Reputation: 1672

Drawing a Circle With JavaScript, Only Getting a Sliver

I am going through the book Pro HTML5 Games 2nd Edition, and am on the first chapter and am running into an issue. The full circle is supposed to be inside of the half-circle the problem though is that I am only seeing displayed a sliver of the full circle. See screenshot: only getting sliver

I have tried adjusting the x and y points, as well as the start angle, but to no avail, I just get the same sliver of circle. What am I doing wrong here?

<script type="text/javascript">
        // This function will be called once the page loads completely
        function pageloaded(){
            // Get a handle to the canvas object
            var canvas = document.getElementById("testcanvas");

            // Get the 2d context for this canvas
            var context = canvas.getContext("2d");

            // Drawing arcs & circles
            // draw a semi-circle
            context.beginPath();
            // Draw an arc at (400, 50) with radius 40 from 0 to 180 degrees, anti-clockwise
            // PI radians = 180 degrees
            context.arc(100, 300, 40, 0, Math.PI, true);
            context.stroke();
            context.closePath();

            // Draw a full circle
            context.beginPath();
            // Draw an arc at (500, 50) with radius 30 from 0 to 360 degrees, anti-clockwise
            // 2 * PI radians = 360 Degrees
            context.arc(100, 300, 30, 2 * Math.PI, true);
            context.fill();
            context.closePath();

            // Draw a three-quarter arc
            context.beginPath();
            // Draw an arc at (400, 100) with radius 25 from 0 to 270 degrees, clockwise
            // (3 / 2 * PI radians = 270 degrees)
            context.arc(200, 300, 25, 0, 3 / 2 * Math.PI, false);
            context.stroke();
            context.closePath();

        };
    </script>

Upvotes: 0

Views: 80

Answers (1)

lunjius
lunjius

Reputation: 418

It seems you are missing the start angle here:

context.arc(100, 300, 30, 2 * Math.PI, true);

Correct:

                          | that was missing
context.arc(100, 300, 30, 0, 2 * Math.PI, true);

Upvotes: 1

Related Questions