I want to set the background as the canvas

p5.js Libraries
1

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:

// 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:

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 part, it definitely works.

2

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:

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
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
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)
}
3

Did anyone have any luck sending pixels via 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, so it must be something else.