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

[ivan.popelyshev]

Hello and Welcome to the forums!

> I would like to fill in with colour the interior of my drawing - the letter itself.

There's no such operation in canvas2d nor in webgl.

Yes, its possible to do that but this is not a basic operation. You have to learn many things like context2d getImageData putImageData and "breadth-first search" and how colors are encoded to do that.

However, there are many other ways to achieve what you want if you slightly change the input. Color-replace filters exist in pixi-filters, but they wont notice which is inner and which is outer. 

If you dont know what BFS is and how to do it on pixels - you have to change your input in photoshop - you have to do that operation in any of editors so you wont have to do it in JS side. 

[ivan.popelyshev]

Yes, I know there was FloodFill operation in old turbo pascal graphics module  It doesnt exist in modern renderers.

[Laura]

Thank you for your reply, Ivan! It is very useful.

[ivan.popelyshev]

Did you manage solve your problem by adjusting the input data? I heard that image processing libs might have that algo, look in p5.js if you are still struggling with it

Edited May 7, 2020 by ivan.popelyshev