Opacity on Canvas

cocos2d-x JavaScript
#1

Hi,

I am trying to add Opacity onto my canvas. Basically I am displaying a scene with a background that has Opacity. In my html5 I am display a background screen which has the Canvas in the center. I cannot figure out how to set the Opacity.

I have tested with

var canvas = document.getElementById(‘gameCanvas’);
var gl = canvas.getContext(“experimental-webgl”,
{premultipliedAlpha: false});
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);

In my index.html. This works and I have Opacity but as soon as cocos takes over I loose it. I have been hunting through the library code to figure out what I need to change but wondered if anyone else had already done this to save me some time.

Thanks

#2

If you use WebGL renderer, then it’s not possible, the background of webgl is always black.
You can switch to Canvas render mode in project.json, change renderMode to 1, then it’s possible to clear your background with transparent color.

#3

How would you clear the canvas with opacity in cocos?

#4

Could someone explain how to clear the background to have a transparent canvas please.

#5

Hi,
When using some design resolution, not fitting resources making some black background. Could it be fixed please ? It destroying design when is part of the whole page with same big background. I’m using canvas rendering now, but i like to use webgl.
Thanks