'how do I make transparent canvas with p5js?
Up to ver. 0.7.3, the canvas is transparent. In this sample, cyan background can be seen around the torus.
<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>But after that version, black background is drawn. In this sample, canvas is filled by opaque black color. The difference is only the version.
<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>How can I make the latest version of p5.js transparent?
PS. To make the point clear, I edited the background to youtube movie. With the old p5js, it is transparent and can see the movie through the p5 drawing. But with the new version, canvas is filled by black background and I cannot overlay the drawing on the movie.
Solution 1:[1]
One way i can find through DOCS is using background function
<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>Solution 2:[2]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Code Maniac |
| Solution 2 | Nick |