The Case of Transparent Canvas

pranjalchaubey · February 2017

I am doing a simple experiment, and failing.

I have a simple setup where a circle follows the mouse pointer, using the standard 'easing' technique. I keep redrawing the 'background' of the canvas while successively increasing the x & y coords of the circle, in each call of the 'draw' function. The background of the canvas has been set as 'red'.

Now, I simply want to make the background of the canvas disappear (ie, become transparent) after a certain number of seconds. The problem is, when I set the background as transparent ('rgba(255, 255, 255, 0)'), the circle instead of following the mouse, starts to draw itself over like a thick line. This is equivalent to not calling the 'background' function inside the 'draw' function.

Not sure what I am doing wrong here. PS - I don't want a white background, I want a transparent background.

quark · February 2017

The sketch widow background cannot be transparent it is always opaque.

jeremydouglass · February 2017

Edit -- this was a Processing desktop application answer, but the question is actually a p5.js in-browser question -- see answers below

@pranjalchaubey -- re:

I simply want to make the background of the canvas disappear (ie, become transparent) after a certain number of seconds.

What did you want to be visible then? The desktop wallpaper image? Black or gray?

As @quark says, the Processing background does not support an alpha channel -- you can only work with transparent images in buffers which are then flattened when they are applied to the main drawing area.

https://processing.org/reference/background_.html

It is not possible to use the transparency alpha parameter with background colors on the main drawing surface. It can only be used along with a PGraphics object and createGraphics().

If you set a full-alpha color and then apply it using background() this is like painting your house with a bucket of water instead of paint -- your house is still solid, and will stay the same color it was before rather than magically turning into glass.

If you really want to see the desktop wallpaper image through your sketch then there is a hack using JFrame from Java Swing that can make your entire application window partially transparent. However, this will affect everything, including the background and all other drawing contents. See the experiment from @Bird and @GoToLoop here:

https://forum.processing.org/two/discussion/20499/moving-a-translucent-window-around-the-screen

blindfish · February 2017

@quark @jeremydouglas: things are a little different with p5 ;)

IIRC you use clear() instead of background in draw() and you can set canvas background once in setup using rgba value to set it as transparent.

blyk · February 2017

@pranjalchaubey This is what @blindfish suggested and it actually works.

Here is demo code -

 // ---  sketch.js      

    function setup() {
      createCanvas(windowWidth,windowHeight); 
    }

    function draw() {
      clear();
      strokeWeight(5);
      stroke(255);
      noFill();
      ellipse(mouseX,mouseY,200,200);
    }

 //--  custom.css  

    html,body {
            padding: 0;
            margin: 0;
            height: 100%;
            max-height: 100%;
            background: blue;
            overflow: hidden;
        }


        #main {
            background: green;
            height: 100%;
            z-index: -1;
        }


        canvas {
            position: fixed;
            top: 0;
            left: 0;
        } 

       // ---  index.html   

         <!DOCTYPE html>
        <html>

        <head>
            <meta charset="UTF-8">
            <title>P5JS Transparent Background</title>
            <link rel="stylesheet" href="css/custom.css">
        </head>

        <body>
            <div id="main"></div>
            <script src="libraries/p5.js" type="text/javascript"></script>
            <script src="libraries/p5.dom.js" type="text/javascript"></script>
            <script src="libraries/p5.sound.js" type="text/javascript"></script>
            <script src="js/sketch.js" type="text/javascript"></script>
        </body>

        </html>

quark · February 2017

Ignore my answer above, I missed the fact that it was about Javascript.

pranjalchaubey · February 2017

Thanks guys for pitching in!

@jeremydouglass @quark - I am thanking my stars that p5 is here, this would have been a lot more difficult in Processing.

@blindfish - Blimey! Why I couldn't think of that!!!

@blyk - Thanks for going that extra mile and putting up a full fledged example. Much appreciated.

Howdy, Stranger!

Categories

In this Discussion

The Case of Transparent Canvas

Best Answer

Answers