# createGraphics as background image

**URL:** <https://discourse.processing.org/t/creategraphics-as-background-image/35640>\
**Category:** Coding Questions\
**Created:** [March 9, 2022, 12:38pm UTC](https://discourse.processing.org/t/creategraphics-as-background-image/35640 "2022-03-09T12:38:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![res56](https://avatars.discourse-cdn.com/v4/letter/r/4da419/32.png) [@res56](https://discourse.processing.org/u/res56)\
**Post date:** [March 9, 2022, 12:38pm UTC](https://discourse.processing.org/t/creategraphics-as-background-image/35640/1 "2022-03-09T12:38:14Z")

</div>

Hey frens,

I generate a grid in setup-function and want to keep this as background- image in draw.  
Here some code:

```auto
let img;
var scl = 30;
var cols, rows;
function setup() {
  

  createCanvas(400, 400);
    
  img = createGraphics(width, height);
  img.stroke(238, 238, 238);
  cols = floor(width / scl);
  rows = floor(height / scl);
  var yoff = 0;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      img.noFill();
      img.rect(x * scl, y * scl, scl, scl);
      push();
      translate(x * scl, y * scl);
      pop();

    }

  }
}

function draw() {
  background(img);
}

```

unfortunately it does not work.

Thanks for any advice in advance,  
T

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [March 9, 2022, 2:10pm UTC](https://discourse.processing.org/t/creategraphics-as-background-image/35640/2 "2022-03-09T14:10:17Z")

</div>

background only supports image outside of the various color formats you can read about it here

> **[reference | p5.js](https://p5js.org/reference/#/p5/background)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

so you need to cast your p5.graphics to a p5.image and apparently the below snippet is the best method we have as far as i have read

```auto
img.copy(tmp, 0, 0, tmp.width, tmp.height, 0, 0, tmp.width, tmp.height);

```

you can see it in action in the code below

```auto
let img;
var scl = 20;
var cols, rows;

function setup() {
  createCanvas(400, 400);
  
  img = createImage(width, height);
  
  let tmp = createGraphics(width, height);
  tmp.stroke(238, 238, 238);
  cols = floor(width / scl);
  rows = floor(height / scl);
  for (var y = 0; y < rows; y++) {
    for (var x = 0; x < cols; x++) {
      tmp.fill(random(255));
      tmp.rect(x * scl, y * scl, scl, scl);
    }
  }
  img.copy(tmp, 0, 0, tmp.width, tmp.height, 0, 0, tmp.width, tmp.height);
}

function draw() {
  background(img);
}

```

why? idk design choices? createGraphics is basically createCanvas as it creates basically the same thing but it would have been nice if they introduced a toImage method into p5.graphics (and maybe they have?) anyways best of luck

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 9, 2022, 2:22pm UTC](https://discourse.processing.org/t/creategraphics-as-background-image/35640/3 "2022-03-09T14:22:28Z")

</div>

Both **background()** & **set()** are incompatible w/ datatype p5.Graphics in p5js.

Obviously that’s a flawed design oversight b/c in Processing’s Java Mode its PGraphics is a subclass of PImage; so everything works smoothly as it should.

As a workaround you could just use **image()** instead: `image(img, 0, 0);`