Colorize complex shape

[Laura]

Hello!

I am developing an application with Angular and PIXI JS which generates bitmap fonts using bezier curves. The curves represent the outlines of my letter and supposing I am drawing the letter O as seen in the image I attached (it is not a stylish drawing, but you get the point), I would like to fill in with colour the interior of my drawing - the letter itself.

I have not found away to do it. I have tried to create a texture from my graphics and then a sprite from the texture, then adding a tint to the sprite, as follows:

const bezierTexture = renderer.generateTexture(this._splineGraphics); // convert shape to texture

const sprite = new PIXI.Sprite(bezierTexture);

this._stage.addChild(sprite);

sprite.texture = PIXI.Texture.WHITE;

sprite.tint = 0xFF0000;

sprite.width = this._width;

sprite.height = this._height;

However, this is tinting my entire canvas.

Thank you,

Laura