Canvas color

Questions
1

Hello. What I want is: the color should be transparent when creating the canvas.
var frame = new Frame({
scaling: scaling,
width: width,
height: height,
color: color,
outerColor: outerColor,
ready: ready,
assets: assets,
path: path,
progress: new Waiter(),
gpu:gpuVarmi
});

When I leave the color variable empty here, it still creates a color.

When I set the html style with #myCanvas{ opacity:0}
and write this code inside the
ready function,
document.getElementById("myCanvas").style.opacity=1
what I want happens. This time, the progress is not visible.

Is there a solution for this?

2


This video is the canvas background without opacity. When this canvas is created, it is blue and it is incompatible with the background I created with css. That's why I want it to be transparent at first.

3

This is what I want. But here too, progress is not visible.
Progress should be visible but no color.

4

I think this should work:

new Frame(FIT, 1024, 768, clear, null, ready);
5

the clear code above works on windows chrome.
But it doesn't work for android and ios.

I made a progressbar with gif myself.

I hide the canvas with this css code.

#myCanvas{

visibility:hidden;

}

in the ready function
document.getElementById("myCanvas").style.visibility="visible"

This works for now. I wonder if this code will cause performance problems?

Also

#myCanvas{

opacity:0;

}

or

#myCanvas{

visibility:hidden;

}

which one is more logical to use? both work.

6

Maybe clear didn't work because I set gpu:true for android and ios?

7

Yes, clear doesn't work when gpu:true is set.

Is there a solution for this?

8

opacity or visibility will be fine for that.

9

For the GPU issue there is a setting in the Frame gpuObj:{transparent:false}

10 
gpu:true,
gpuObj:{transparent:true}

It works when clear gpuObj transparent is set to true.
I solved it now with .
Which one do you think is better in terms of performance?

11

Hahaha - we answered at the same time! I suspect that transparent defaults to false for performance reasons but you probably will not notice. Test and see.

1 Like
12

Ok thank you.