On p5JS canvas changing background image showing already drawn objects behind the background image

Adeeba

Hi,

I'm drawing some objects on canvas but if later I change the background image on demand, then already drawn objects are behind the background image. How to bring already drawn objects in front. Below is the sample code i'm using to change the background image.

function draw() { if(chnBg){ //if change background is clicked loadImage("images/Grid_Image.png",function(bg){
background(bg);
}); } }

GoToLoop

In general, avoid loading your assets on-the-demand, as long as they're not too big and comfortably fit all in RAM.

That is, load them all within preload(), and store them in variables or arrays:
https://p5js.org/reference/#/p5/preload

Adeeba

i have done this but problem remains the same...

GoToLoop

Show your most current attempt then:
https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Adeeba

Thanks for your help/suggestions. I changed my code (as per below sample) and background image applied behind the already drawn elements

function draw() { line(0,0,100,100);
canvas.drawingContext.globalCompositeOperation = 'destination-over'; background(bg); }