CODEWITHSUNDEEP
javascriptcanvasp5.js
Akihiro Yoshikawa
Akihiro Yoshikawa

Reputation: 127

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.

Upvotes: 2

Views: 478

Answers (1)

Code Maniac
Code Maniac

Reputation: 37755

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>

Upvotes: 1

Related Questions