Create a CanvasSpace with transparent color

[amorino]

Is it possible to create a CanvasSpace with transparent background?

I'm currently using
new CanvasSpace('id').setup({ bgcolor: 'rgba(0,0,0,0.1)' });
with no luck

Thanks!

[tofuness]

Edit: Transparent colors should work. It's just that stack every time your canvas is updated. In your case, the background color should quickly fade to black.

Related to this line not being called. In other words, Pt currently either paints over your canvas (with bgcolor) or clears it.

A quick fix could be to always clear the canvas:

@ctx.clearRect( 0, 0, @size.x, @size.y )
if @bgcolor
  @ctx.fillStyle = @bgcolor;
  @ctx.fillRect( 0, 0, @size.x, @size.y )

[amorino]

Yep, if I put 'rgba(0,0,0,0.0)' it wont clear the canvas, instead I can see all the movement without clear.

[williamngan]

@amorino There's probably a bug somewhere that the clearRect logic doesn't work. Good to know.

Meanwhile, if you call clearRect directly like what @tofuness suggested, it should work. Eg, suppose you have a space like yours above:

var mySpace = new CanvasSpace('id').setup({ bgcolor: 'rgba(0,0,0,0.1)' });

Then inside the animate loop, you can add something like this to force the clearRect:

mySpace.ctx.clearRect( 0, 0, mySpace.size.x, mySpace.size.y );

See if that works for now? We'll hunt down the bug. Thanks!

[williamngan]

This bug should be fixed now. You can set a transparent background via space.setup({bgcolor: false}) or space.setup({bgcolor: "transparent"}). Please see if it works for you. Thanks for reporting!

05a0f63

[hyshka]

To get this to work I had to set const space = new CanvasSpace('#hero-animation').setup({ bgColor: 'transparent' }); when initializing space and space.clear('transparent'); at the beginning of my animate block.