HTML5 Game - Using the arcTo Method

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

Introduction

The following code demonstrates using the arcTo method.

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

            let point1 = [100, 10];/*from w  w w  .  j a  v a 2  s .c  o  m*/
            let point2 = [200, 10];
            let point3 = [200, 110];

            ctx.fillStyle = "yellow";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;

            ctx.beginPath();
            ctx.moveTo(point1[0], point1[1]);
            ctx.arcTo(point2[0], point2[1], point3[0], point3[1], 100);
            ctx.stroke();
    
            drawPoint(point1[0], point1[1]);
            drawPoint(point2[0], point2[1]);
            drawPoint(point3[0], point3[1]);
    
            ctx.beginPath();
            ctx.moveTo(point1[0], point1[1]);
            ctx.lineTo(point2[0], point2[1]);
            ctx.lineTo(point3[0], point3[1]);
            ctx.stroke();
    
            function drawPoint(x, y) {
                ctx.lineWidth = 1;
                ctx.strokeStyle = "red";
                ctx.strokeRect(x -2, y-2, 4, 4);
            }
        </script>
    </body>
</html>

The arc drawn by the arcTo method depends on two lines.

The first line is from the end of the last sub-path to the point of the first two method arguments.

The second line is from the point of the first two arguments to the point of the third and fourth arguments.

The arc is drawn as the shortest line between the end of the last sub-path and the second point.

The radius specified by the last argument.

Related Topic