---
description: Some Examples of using Canva-Lang
---

# Examples

####

{% hint style="info" %}
canvas-lang .&#x20;
{% endhint %}

#### Basic Example

{% code overflow="wrap" lineNumbers="true" %}
```javascript
canvas {
  background "navy";
  circle at (10, 10) radius 5 fill "yellow";
  text "Hello World" at (0, 15) size 10 color "white";
}
```
{% endcode %}

<figure><img src="https://286041813-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwHcYHze0zqyVt4wF8Sth%2Fuploads%2FqVBFISNWKYMhYbAifd5j%2FScreenshot%202025-03-22%20at%204.52.46%E2%80%AFAM.png?alt=media&#x26;token=1461d355-0735-45bd-a0fd-03bc814605d2" alt=""><figcaption><p>Basic Example</p></figcaption></figure>

#### Animation Example

{% code overflow="wrap" lineNumbers="true" %}
```javascript
canvas {
  background "black";
  
  animate {
    frame {
      circle at (5, 5) radius 3 fill "red";
    }
    frame {
      circle at (10, 5) radius 3 fill "blue";
    }
    frame {
      circle at (15, 5) radius 3 fill "green";
    }
  } for 5000;
}
```
{% endcode %}

{% file src="https://286041813-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwHcYHze0zqyVt4wF8Sth%2Fuploads%2FgR7dJYvOxgfO78qE6PQD%2FScreen%20Recording%202025-03-22%20at%204.54.12%E2%80%AFAM.mov?alt=media&token=7e7f9e8b-7bc5-4d42-b7ec-e396cc6487f6" %}
Animation Example
{% endfile %}

#### Rainbow Text Example

{% code overflow="wrap" lineNumbers="true" %}
```javascript
canvas {
  background "black";
  rainbow "Welcome to canvas-lang!" at (5, 5) duration 200;
}

```
{% endcode %}

<figure><img src="https://286041813-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwHcYHze0zqyVt4wF8Sth%2Fuploads%2FiOujSdO9iLFc41kRzXkw%2FScreenshot%202025-03-22%20at%204.55.24%E2%80%AFAM.png?alt=media&#x26;token=daee29ec-b1ef-4227-9e52-2aeb1ff6d16f" alt=""><figcaption><p>Rainbow Text Example </p></figcaption></figure>
