CodingTrain / CodingTrain/Suggestion-Box
P5.js - Dealing with canvas in the background
- Lingua principale
- Nessun dato sulla lingua
- Stelle
- 570
- Fork
- 85
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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");
}
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Direzione di ricerca
La issue menziona un canvas p5.js a schermo intero, pulsanti DOM, createCanvas, windowWidth, windowHeight, canvas.position e canvas.style; non viene indicato alcun file del repository né alcun test. Inizia esaminando il materiale esistente della playlist DOM e considera il lavoro completo quando la guida sul layering tra canvas e DOM è documentata come argomento di un video.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript
- Ambito
- content, documentation, web-dev
- Tipo di issue
- Documentazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 25/100