# arcTo()

[browser](../..) ⟩ [canvas](..) ⟩ [path]() ⟩ [curve](curve) ⟩ arcTo()

{% tabs %}
{% tab title="💈範例" %}
![moveTo(A), arcTo(B,C)](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FwulG1oZGwU5FBjdlaJL2%2FarcTo.png?alt=media\&token=2757a4e4-8ecf-48e5-b787-76fe21449bd5)

{% hint style="warning" %}
⭐️ 注意：<mark style="color:blue;">arcTo(B, C)</mark> 所畫出的弧

* 剛開始有一段<mark style="color:yellow;">從 A 出發的直線</mark>。
* <mark style="color:red;">不會經過</mark> B。
* 也<mark style="color:red;">不會連直線到 C</mark>。
{% endhint %}

:floppy\_disk: replit：[canvas arcTo()](https://replit.com/@pegasusroe/canvas-arcTo#script.js)

⬆️ 需要： [vector](../../../appendix/custom/class/vector "mention"), [drawoncanvas2d](../+ext/drawoncanvas2d "mention")

```javascript
const { PI } = Math;

// degrees
function deg(x) { return PI * x / 180 }

// draw on canvas
drawOnCanvas2D('#playground', (ctx) => {

    const A = vec(200, 40);
    const B = A.plus(0, 120);
    const C = A.plus(-150, 0);
    const R = 40, r = 8;
    const wholeRound = [0, 2 * PI];

    // draw point
    function point(P, color) {
        ctx.beginPath();
        if (color) ctx.fillStyle = color;
        ctx.arc(...P.coords, r, ...wholeRound);
        ctx.fill();
    }

    // label point
    function label(text, p, offset = [15, 0]) {
        ctx.fillText(text, ...p.plus(...offset).coords);
    }

    // Tangential lines (from A to B to C)
    ctx.beginPath();
    ctx.moveTo(...A.coords);
    ctx.lineTo(...B.coords);
    ctx.lineTo(...C.coords);

    ctx.strokeStyle = 'gray';
    ctx.stroke();

    // Arc (from A to C, controlled by B)
    ctx.beginPath();
    ctx.moveTo(...A.coords);
    ctx.arcTo(...B.coords, ...C.coords, R);

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    ctx.stroke();

    // points
    point(A, 'blue');   // start point
    point(B, 'red');    // control point 1
    point(C);           // control point 2

    // labels
    ctx.font = 'bold 24px serif';
    ctx.fillStyle = 'black';
    label(`A`, A);
    label(`B`, B);
    label(`C`, C);

    ctx.font = '12px monospace';
    label(`moveTo(A)`, vec(250, 100));
    label(`arcTo(B, C)`, vec(250, 120));

});
```
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩
  * [.arc()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) - (center, radius)\
    will <mark style="color:yellow;">**add a line**</mark> from <mark style="color:yellow;">**current point**</mark> to <mark style="color:yellow;">**arc start**</mark> <mark style="color:red;">**if current point present**</mark>.
  * [.arcTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo) - commonly used for making <mark style="color:yellow;">**rounded corners**</mark>.
{% endtab %}

{% tab title="⬇️ 應用" %}
* [ctx.roundedrect](../+ext/ctx.roundedrect "mention") - rounded rect (subpath)
{% endtab %}
{% endtabs %}
