> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/canvas/+ext/drawoncanvas2d.md).

# drawOnCanvas2D()

[browser](/web/browser.md) ⟩ [canvas](/web/browser/canvas.md) ⟩ drawOnCanvas2D()

{% tabs %}
{% tab title="💾 程式" %}
:floppy\_disk: replit: [square & circle](https://replit.com/@pegasusroe/canvas-API#script.js)

```javascript
// ⭐ draw on <canvas> 2D context
function drawOnCanvas2D(selector, draw) {
    let canvas = document.querySelector(selector);
    if (!canvas) { console.log(`⛔ no such element: "${selector}"`); return; }
    let context = canvas.getContext("2d");
    if (draw) draw(context);
}
```

{% endtab %}

{% tab title="⬇️ 應用" %}

* [square & circle](/web/browser/canvas/examples/square-and-circle.md)
* [\<canvas>](/web/browser/canvas.md) ⟩&#x20;
  * [arcTo()](/web/browser/canvas/path/arcto.md)
  * [curves](/web/browser/canvas/path/curve.md)
  * [transformation](/web/browser/canvas/state/matrix.md)
  * [Koch snowflake](/web/browser/canvas/state/matrix/koch-snowflake.md)
    {% endtab %}

{% tab title="📘 手冊" %}

* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
  {% endtab %}
  {% endtabs %}