# arcTo()

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

{% tabs %}
{% tab title="💈範例" %}
![moveTo(A), arcTo(B,C)](/files/WEfgBeiAiWJmDdL0JN4E)

{% 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](/web/appendix/custom/class/vector.md), [drawOnCanvas2D()](/web/browser/canvas/+ext/drawoncanvas2d.md)

```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()](/web/browser/canvas/+ext/ctx.roundedrect.md) - rounded rect (subpath)
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/browser/canvas/path/arcto.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.