# Backbuffer in p5js

**URL:** https://discourse.processing.org/t/backbuffer-in-p5js/29769
**Category:** p5.js
**Created:** [May 1, 2021, 12:36am UTC](https://discourse.processing.org/t/backbuffer-in-p5js/29769 "2021-05-01T00:36:45Z")
**Posts on this page:** 1
**Showing post:** 13

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 3, 2021, 8:45pm UTC](https://discourse.processing.org/t/backbuffer-in-p5js/29769/13 "2021-05-03T20:45:57Z")

</div>

That is great and indeed this is a difficult example to make by yourself!

One suggestion would be to use two p5.Graphics objects. Right now you copy `canvas` to `backbuffer` then render `canvas`. This works perfectly in your case. But this becomes problematic if you want to use more layers - for example, if you draw a text on top of the `canvas`, this will affect the `backbuffer` in the next frame. If you prepare, say, `backbuffer0` and `backbuffer1`, you can do something like this (I haven’t tested the code)

```javascript
function draw() {
  backbuffer0.shader(sh_render);
  sh_render.setUniform("buffer", backbuffer1);
  ...
  backbuffer0.rect(0, 0, width, height);

  image(backbuffer0, width * -0.5, height * -0.5, width, height);

  [backbuffer0, backbuffer1] = [backbuffer1, backbuffer0]; // swap
}

```

this is so-called ping-pong (because it’s like a ping-pong rally) and useful because, as I mentioned above, they are not dependent on what is drawn on `canvas`.

---

_[View the full topic](https://discourse.processing.org/t/backbuffer-in-p5js/29769)._