在 p5.js 程序中将 image(canvas, 0, 0) 放在哪里？

Question

I read the official documentation regarding the image() function but it has no information on this aspect of the function. The basic structure of my programme is as follows:

function setup() {
  createCanvas(400, 400);
  sec = createGraphics(400, 400);
}
function draw() {
  sec.background(255)
  background(0)
  image(sec, 0, 0)
}
  

I am confused as to where I should place the background functions of the main and secondary canvas and the image(sec, 0, 0) function.

What I am trying to achieve is for the secondary canvas to be transparent and above the main canvas. Both of the canvases should be visible.

Answer 1

I think what you are looking for is the tint() function:

Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value.

In this codepen I reused your code but changed the colors of the backgrounds to red and green to be able to see which one is displayed and I used tint() to change the transparency of the second canvas.

let tintAlpha = 0;
function draw() {
  tintAlpha++;
  sec.background(0, 255, 0) // sec background is green
  background(255, 0, 0) // primary background is red
  tint(255, tintAlpha) // when alpha rises the secondary background is less and less transparent
  image(sec, 0, 0)
}

I think it yields the result you are trying to get.