# drawOnCanvas2D()

[browser](../..) ⟩ [canvas](..) ⟩ 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-and-circle](../examples/square-and-circle "mention")
* [..](.. "mention") ⟩&#x20;
  * [arcto](../path/arcto "mention")
  * [curve](../path/curve "mention")
  * [matrix](../state/matrix "mention")
  * [koch-snowflake](../state/matrix/koch-snowflake "mention")
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
{% endtab %}
{% endtabs %}
