# I want to set the background as the canvas

**URL:** <https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154>\
**Category:** Libraries\
**Created:** [December 12, 2020, 11:36am UTC](https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154 "2020-12-12T11:36:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bi3her](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bi3her](https://discourse.processing.org/u/bi3her)\
**Post date:** [December 12, 2020, 11:36am UTC](https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154/1 "2020-12-12T11:36:44Z")

</div>

I’m working on a small project website where clients draw something and then they can click a button to send the canvas to the server, and then the server sends it back to other clients and the canvas image is set as their background.  
What I haven’t figured out yet is how to put the canvas image in a variable to then load it in the background as follows:

```auto
// this code is not working but I think you get the idea. I save the canvas image in a variable
var canvas = createCanvas(500, 500)
// then I put the canvas in the background() function
background(canvas)

```

This is not exactly my code, but if you have some experience with sockets I think you will understand the code below:

```auto
const canvas = createCanvas(500,500);
// sendCanvas event below is when the server wants the canvas of this client, then emit sends the 
// canvas in an event called getCanvas
socket.on('sendCanvas', () => {socket.emit('getCanvas', canvas));
// Canvas event is for getting the canvas from the server, then it sets the background as the canvas given by the server.
socket.on('Canvas', canvas => {background(canvas));
/* This is what I've already tried. I also tried saveCanvas but it didn't save it anywhere in the project 
 folder
*/

```

I know this may be very confusing, but I’m new to p5.js so feel free to ask any question regarding my code (which doesn’t work). also don’t worry about the [socket.io](http://socket.io) part, it definitely works.

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [December 16, 2020, 5:23pm UTC](https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154/2 "2020-12-16T17:23:03Z")

</div>

I don’t think `background()` can take an image as an argument, but you can use `image()` function to display a saved canvas. If you are only using p5js then you can save as `p5.Image` object, or, if it needs to communicate with other canvas programs, then, you can use different data structure to save the canvas.

Below are my quick attempts, first with `p5.Image` and second, using `ImageData` object. `ImageData` is a simple int array so you should be able to send it to a server. Here is more info:

> **[ImageData - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ImageData)**

I have to admit that my codes aren’t an efficient way to do this, but hopefully, it will help you a little bit.

1. p5.Image

```auto
let img

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  if (mouseIsPressed) {
    fill(random(255), random(255), random(255))
    ellipse(mouseX, mouseY, 50, 50)
  }
}

function keyPressed() {
  if (key === 'c') {
    img = canvasToImage()
    background(220)
    console.log('copied')
    img.save()
    console.log('saved')
    
    image(img, 0, 0, width, height)
  }
}

function canvasToImage() {
  const d = pixelDensity(); // for retina display
  const img = createImage(width * d, height * d)

  loadPixels()
  img.loadPixels()
  for (let i = 0; i < pixels.length; i++) {
    img.pixels[i] = pixels[i]
  }
  img.updatePixels()
  
  return img
}

```

1. ImageData

```auto
let img

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  if (mouseIsPressed) {
    fill(random(255), random(255), random(255))
    ellipse(mouseX, mouseY, 50, 50)
  }
}

function keyPressed() {
  if (key === 'c') {
    img = canvasToImage()
    console.log('copied')
    // img is an ImageData object
    // https://developer.mozilla.org/en-US/docs/Web/API/ImageData
    displayImageData(img.data)
  }
}

function displayImageData(data) {
  loadPixels()
  for (let i = 0; i < data.length; i++) {
    pixels[i] = data[i]
  }
  updatePixels()
}

function canvasToImage() {
  const d = pixelDensity(); // for retina display
  return drawingContext.getImageData(0, 0, width * 2, height * 2)
}

```

---

<div class="post-metadata">

**Author:** ![spaxe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/spaxe/32/16672_2.png) [@spaxe](https://discourse.processing.org/u/spaxe)\
**Post date:** [July 19, 2022, 1:56pm UTC](https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154/3 "2022-07-19T13:56:38Z")

</div>

Did anyone have any luck sending `pixels` via [socket.io](http://socket.io)? whenever I tried, the event doesn’t get sent at all. I could send any objects or arrays and such via [socket.io](http://socket.io), so it must be something else.