Hasta ver. 0.7.3, el lienzo es transparente. En esta muestra, se puede ver un fondo cian alrededor del toro.
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> <iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE"></iframe> <script> function setup() { createCanvas(400, 400, WEBGL); fill('lightpink'); } function draw() { torus(100, 40); } </script> <style> canvas { position: absolute; z-Index: 1; top: 0; left: 0; } </style> </body>Pero después de esa versión, se dibuja un fondo negro. En esta muestra, el lienzo está lleno de color negro opaco. La diferencia es sólo la versión.
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> <iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE"></iframe> <script> function setup() { createCanvas(400, 400, WEBGL); fill('lightpink'); } function draw() { torus(100, 40); } </script> <style> canvas { position: absolute; z-Index: 1; top: 0; left: 0; } </style> </body>¿Cómo puedo hacer que la última versión de p5.js sea transparente?
PD. Para aclarar el punto, edité el fondo de la película de YouTube. Con el antiguo p5js, es transparente y se puede ver la película a través del dibujo del p5. Pero con la nueva versión, el lienzo se llena con un fondo negro y no puedo superponer el dibujo en la película.
Una forma en que puedo encontrar a través de DOCS es usando la función de fondo
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> <div id="back" style="height: 100%;background:cyan"></div> <script> function setup() { var canvas = createCanvas(400, 400, WEBGL); canvas.parent('back'); fill('lightpink'); } function draw() { background("cyan") torus(100, 40); } </script> </body>