How to use CCRenderTexture for custom drawing with context?

my code is very simple, i just want to draw a semi translucent rect at the bottom of my main canvas:

var texture = cc.RenderTexture.create(800, 70);
var ctx = texture.context;
ctx.fillStyle = “rgba(0, 0, 1, 0.8)”;
ctx.fillRect(0, 0, size.width, 70);

// then on my main layer
this.addChild(texture);

What could i be missing?

“rgba(0, 0, 1, 0.8)”; need to “rgba(0, 0, 255, 0.8)”;

and when you create a RenderTexture, the context’s origin point is translate to left-bottom.

this.context.translate(0, this.canvas.height);

If you want directly on the canvas,you need to know the y-axis is flipped。
so fillRect code need like this:
ctx.fillRect(0, 0, size.width, -70);

I tried a plethora of combination from changing the fillrect, fillstyle, positions etc., none work

but let me show you a screnshot - http://d.pr/i/gWtH

where it says “debug panel” that’s where the fillRect i expect to show up. The string “Debug panel” is actually sitting on that cc.RenderTexture.

Here was my last attempt

var texture = cc.RenderTexture.create(size.width, 570);
var ctx = texture.context;
ctx.translate(0, size.height);
ctx.strokeStyle = “rgba(255,255,255,1)”;
ctx.fillStyle = “rgba(255,255,255,1)”;
ctx.fillRect(0, 0, size.width, ~~200);
ctx.fill;
// create a label and add it to child
debugLabel = cc.LabelTTF.create;
debugLabel.setPosition);
debugLabel.setAnchorPoint);
texture.addChild;@

So as you can see from my screenshot the cc.RenderTexture is showing up~~ but the fillRect isn’t working as i expect it should.

dingping lv wrote:

“rgba(0, 0, 1, 0.8)”; need to “rgba(0, 0, 255, 0.8)”;
>
and when you create a RenderTexture, the context’s origin point is translate to left-bottom.
>
this.context.translate(0, this.canvas.height);
>
If you want directly on the canvas,you need to know the y-axis is flipped。
so fillRect code need like this:
ctx.fillRect(0, 0, size.width, -70);