# createGraphics()

### Example

![](https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FxpKWkTYfm7YrWu0TnBpV%2Fimage.png?alt=media\&token=cea7d291-ef2a-4433-8da8-0f3e4fe07f1e)

```python
def setup():
  ...
  global canvas2
  canvas2 = createGraphics(200, 200)
  
def draw():
  ...
  
  canvas2.background(112, 88, 255)
  canvas2.fill(176, 235, 51)
  canvas2.circle(100,100,100)
  
  image(canvas2, 100, 100)
```

### Syntax

```python
createGraphics(w, h)
```

<figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F8XKU09qVJSyHhWO1DaDr%2FcreateGraphics.drawio.png?alt=media&#x26;token=d6dcede9-7b5f-48d6-a90b-91e1a9939c0d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="227">Inputs</th><th>Description</th></tr></thead><tbody><tr><td>w</td><td>width of the off-screen buffer</td></tr><tr><td>h</td><td>height of the off-screen buffer</td></tr><tr><td></td><td></td></tr></tbody></table>

### Description

the `createGraphics()` function is used to **create an off-screen graphics** buffer that can be manipulated and then displayed on the main canvas.

The buffer is displayed on the main canvas using `image(buffer, x, y)`.

Using `createGraphics()` allows you to create complex graphics that can be drawn off-screen before being displayed on the main canvas. This is particularly useful when you want to create more complex animations or drawings that would be difficult to create directly on the main canvas.

#### Example:&#x20;

*Below program uses one background under setup() and one under draw()*

<figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F5w23tAiegHVIBrcLox0m%2FcreateGraphics.gif?alt=media&#x26;token=a57efacb-1e17-4b49-b3a5-f74635a08b93" alt=""><figcaption></figcaption></figure>

<details>

<summary>Example full code</summary>

```python
def setup():
  createCanvas(400,400)
  frameRate(7)
  global buffer
  buffer = createGraphics(200, 200)
  background(255, 79, 132)
  
def draw():
  noStroke()
  fill(255, 164, 28,100)
  circle(random(width),random(height),50)
  # drawTickAxes()
  buffer.background(112, 88, 255)
  buffer.noStroke()
  # buffer.drawTickAxes()
  buffer.fill(176, 235, 51)
  buffer.circle(random(20,190),random(20,190),50)
  image(buffer, 100, 100)
```

</details>

{% hint style="info" %}
Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)<mark style="color:blue;">**!**</mark>

We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link).
{% endhint %}