P5.js - Dealing with canvas in the background

Hi, for one of my own project, I needed to realize a full screen animation (character walking on a terrain made of tiles) with dom elements as a user interface. My problem soon became clear : if my canvas was full screen, I couldn't access the dom elements layered "on top" of the canvas (click buttons and such was impossible) .

I found a solution myself, but I believe there are others and would love to see how you'd handle it. I really struggled myself, and I thinks it's a problem (although not a hard one) that is sufficient for a small video in the dom playlist.

My solution :
//________________________________________________________________
var canvas;
var domElement;

function setup(){
canvas = createCanvas(windowWidth, windowHeight)
canvas.position(0,0);

domElement = createButton('You can't click me');
domElement.style("height", "100px");
domElement.style("width", "100px");
domElement.position(0,0));

/*Using this line, the button is clickable. Good thing is, the canvas' surface which is not covered by a dom element is still clickable. I'm literally using this all the time. Allows for easy UI making. */

canvas.style("z-index", "-1");

}

The issue mentions a full-screen p5.js canvas, DOM buttons, createCanvas, windowWidth, windowHeight, canvas.position, and canvas.style; no repository file or test is named. Start by reviewing the existing DOM playlist material, and consider it complete when the canvas/DOM layering guidance is documented as a video topic.

Escrito por el modelo de indexación a partir del texto del issue.