# Canvas Component

## Overview

The canvas component is a touch-sensitive panel that enables the movement of objects with velocity, collisions, and the ability to bounce off each other. It is most often used to create dynamic games and experiences that involve touching the device’s screen.

## Adding a Canvas 

To add a canvas to your app, drag and drop the canvas component into the app builder. 

When you click on the Canvas in your component tree, Canvas tab will appear. Click on this tab to customize your canvas

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MG87Cb9btBR2G3o5rZ8%2F-MG8BXpFVRQAxy8gFRZy%2Fnewcanvas.png?alt=media\&token=886b977d-0a0b-42ed-b457-748b595b9961)

The three elements of a Canvas are the **Stage,** the **Sprites**, and the **Canvas Label**.

## The Stage

The Stage is the background of your Canvas. You can set a background color or background picture, a border color, and the stage's Height and Width. You can click and drag your **Sprites** on the stage in the Canvas tab.

### Gravity

You can set **Gravity** of the Stage along the X and Y axis. The Sprites on the stage can be toggled to **ignore** gravity or not. If a Sprite is affected by gravity, it will be pulled in the direction of the gravity. 

{% tabs %}
{% tab title="Y Gravity" %}
![Behavior of Sprite when Y Gravity = 100, X Gravity = 0](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MAAmAnmoJkMLbOPPDB1%2F-MAB4XQvBSVD4ynbydWp%2Fy-axis-gravity.gif?alt=media\&token=77161c0b-8b51-4f20-b9cc-5969c78d820f)
{% endtab %}

{% tab title="X Gravity" %}
![Behavior of Sprite when Y Gravity = 0, X Gravity = 100](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MAAmAnmoJkMLbOPPDB1%2F-MAB4MZUlPWgO2whviWN%2Fx-axis-gravity.gif?alt=media\&token=73ff9f21-4edc-4bcc-8e15-5171783886c1)
{% endtab %}

{% tab title="Y and X Gravity" %}
![Behavior of Sprite when Y Gravity = 100, X Gravity = 100](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MAB7GEJdfAAWn-eSoCy%2F-MAB4hNYuctPs2UBUo8G%2Fx-y-axis-gravity%20\(1\).gif?alt=media\&token=0d463169-d773-4402-b6da-9bab597f46c8)

{% endtab %}
{% endtabs %}

### Stage Scaling Mode

Your Canvas Stage will automatically scale up in order to match the size of the device screen. If the aspect ratio of the Stage does not match the aspect ratio of the device, you can use **Stage Scaling Mode** to resize the background to fill the device screen.

**Scale:** The aspect ratio of the background will be maintained, and the background will be scaled up. May result in some of the background being cropped.

**Stretch:** The background image will be stretch in order to fill the screen. May result in the background image being distorted.

#### Stage Alignment

Select how you want your background image to be centered when it is scaled to match the device screen.

Can be set to **center, center horizontally only, center vertically only,** or **none.**

### Touch Drawing

You can enable **Touch Drawing** on your Screen. \
You can set the **Drawing Color** to choose the color you draw in. \
You can set the **Drawing Width** to choose the thickness of the line you draw on the stage.

### Multiple Stages

You can add multiple stages to a Canvas component, in the same way you can add multiple Screens to an app project. when you have selected your Canvas tab, click on the + next to your Stage name to add another Stage to the Canvas.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MG7ytg-FN4A36zdRFsH%2F-MG845HHrdPuTEmPcD-E%2Faddstage.png?alt=media\&token=373c3dc6-e5c0-4359-a72c-49f6dbdb922b)

Each Stage has its own Sprites, background color, gravity, etc.