HTML5 Game - Using the arc Method

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

Introduction

In arc method we specify a point on the canvas using the first two method arguments.

We set the radius of the arc with the third argument and then we specify the start and end angle for the arc.

The final argument specifies whether the arc is drawn in the clockwise or anticlockwise direction.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            let ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillStyle = "yellow";
            ctx.lineWidth = "3";
                /*from   www. j  ava 2s  .  com*/
            ctx.beginPath();
            ctx.arc(70, 70, 60, 0, Math.PI * 2, true);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.arc(200, 70, 60, Math.PI/2, Math.PI, true);
            ctx.fill();
            ctx.stroke();
            
            ctx.beginPath();
            let val = 0;
            for (let i = 0; i < 4; i++) {
                ctx.arc(350, 70, 60, val, val + Math.PI/4, false);
                val+= Math.PI/2;
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        </script>
    </body>
</html>

Related Topic