> For the complete documentation index, see [llms.txt](https://docs.anvil.team/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.anvil.team/namespaces/draw.md).

# draw

{% hint style="info" %}
**IMPORTANT**

A single call to any methods of draw will not keep drawing, it is just for one single frame.

Therefore in order to render something every frame, attach an eventlistener to the [engine](/namespaces/engine.md)

and listen to the [<mark style="color:purple;">`render`</mark>](https://docs.anvil.team/namespaces/pages/AxBaneWZkXA9PF9gC37h#engine.addeventlistener-name-callable) event, like in the examples below.
{% endhint %}

### Methods

* [text](#draw.text-content-pos-color-fontsize-fontname)
* [line](#draw.line-start-end-color-thickness)
* [rectangle](#draw.rectangle-start-end-color-thickness)
* [rectangleFilled](#draw.rectanglefilled-start-end-color-thickness)
* [circle](#draw.rectanglefilled-start-end-color-thickness-1)
* [circleFilled](#draw.circle-center-radius-color-segments-1)

### <mark style="color:green;">`draw.text(content, pos, color, fontSize, fontName)`</mark>

* <mark style="color:purple;">`content`</mark> - The text you wish to draw
* <mark style="color:purple;">`pos`</mark> - The screen position where to draw the text as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`color`</mark> - The color of the text as a [Vec4](/types/vec4.md), e.g. Vec4:new(255, 0, 0, 255) for red with 100% alpha
* <mark style="color:purple;">`fontSize`</mark> - The size of the text in pixels
* <mark style="color:purple;">`fontName`</mark> - The name of the font

Available Font sizes:

* <mark style="color:purple;">12, 14, 16, 18, 24, 32, 36, 48, 60</mark>

Available Fonts:

* Verdana
* VerdanaBold
* Impact
* Beyblade
* Dameron
* RobotoMono-Light

Draws text at a position.

**Example:**

```lua
function render()
	draw.text("Hey", Vec2:new(200, 200), Vec4:new(255, 0, 0, 255), 60, "Verdana")
end

engine.addEventListener("render", render)
```

![Drawing text](/files/lVnFMbWvK9HPFEImHqZq)

### <mark style="color:green;">`draw.line(start, end, color, thickness)`</mark>

* <mark style="color:purple;">`start`</mark> - Start position of the line as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`end`</mark> - End Position of the line as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`color`</mark> - The color of the line as a [Vec4](/types/vec4.md), e.g. Vec4:new(255, 0, 0, 255) for red with 100% alpha
* <mark style="color:purple;">`thickness`</mark> - The thickness of the line in pixels

Draws a line from point A to B.

**Example:**

```lua
function render()
	draw.line(Vec2:new(200,300), Vec2:new(500, 500), Vec4:new(255, 0, 0, 255), 2, "Verdana")
end

engine.addEventListener("render", render)
```

![Drawing a line](/files/wfAuIMZjGNSvU0KCuMxB)

### <mark style="color:green;">`draw.rectangle(topLeft, botRight, color, rounding)`</mark>

* <mark style="color:purple;">`topLeft`</mark> - Top left corner as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`botRight`</mark>- Bottom right corner as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`color`</mark> - The color of the rect as a [Vec4](/types/vec4.md), e.g. Vec4:new(255, 0, 0, 255) for red with 100% alpha
* <mark style="color:purple;">`rounding`</mark>- Edge rounding in pixels

Draws a rectangle spanning from `topLeft` to `botRight`.

**Example:**

```lua
function render()
	draw.rectangle(Vec2:new(200,200), Vec2:new(250, 300), Vec4:new(255, 0, 0, 255), 0)
end

engine.addEventListener("render", render)
```

![Drawing a rectangle](/files/dE9RCVEOflPxfTy4NInf)

### <mark style="color:green;">`draw.rectangleFilled(start, end, color, thickness)`</mark>

* <mark style="color:purple;">`topLeft`</mark> - Top left corner as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`botRight`</mark>- Bottom right corner as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`color`</mark> - The color of the rect as a [Vec4](/types/vec4.md), e.g. Vec4:new(255, 0, 0, 255) for red with 100% alpha
* <mark style="color:purple;">`rounding`</mark>- Edge rounding in pixels

Draws a **filled** rectangle spanning from `topLeft` to `botRight`.

**Example:**

```lua
function render()
	draw.rectangleFilled(Vec2:new(200,200), Vec2:new(250, 300), Vec4:new(255, 0, 0, 255), 0)
end

engine.addEventListener("render", render)
```

![Drawing a filled rectangle](/files/JJlXmHgTJT5QrGDoLzwo)

### <mark style="color:green;">`draw.circle(center, radius, color, segments)`</mark>

* <mark style="color:purple;">`center`</mark> - The center of the circle as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`radius`</mark> - The radius of the circle in pixels
* <mark style="color:purple;">`color`</mark> - The color of the circle as a [Vec4](/types/vec4.md), e.g. Vec4:new(255, 0, 0, 255) for red&#x20;
* <mark style="color:purple;">`segments`</mark> - The circle is made up of lines, the more segments the smoother

Draws a circle.

**Example:**

```lua
function render()
	draw.circle(Vec2:new(200,300), 60, Vec4:new(255, 0, 0, 255), 20)
end

engine.addEventListener("render", render)
```

![Drawing a circle](/files/Mnmc6YlC3OBXxxqpalxo)

### <mark style="color:green;">`draw.circleFilled(center, radius, color, segments)`</mark>

* <mark style="color:purple;">`center`</mark> - The center of the circle as a [Vec2](/types/vec2.md)
* <mark style="color:purple;">`radius`</mark> - The radius of the circle in pixels
* <mark style="color:purple;">`color`</mark> - The color of the circle as a [Vec4](/types/vec4.md), e.g. Vec4:new(255, 0, 0, 255) for red&#x20;
* <mark style="color:purple;">`segments`</mark> - The circle is made up of lines, the more segments the smoother

Draws a filled circle.

**Example:**

```lua
function render()
	draw.circleFilled(Vec2:new(200,300), 60, Vec4:new(255, 0, 0, 255), 20)
end

engine.addEventListener("render", render)
```

<figure><img src="/files/rnJ5GQv9PVEXGTBgkCcv" alt=""><figcaption></figcaption></figure>
