JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<canvas id="canvas" width="800" height="800"></canvas>

JavaScript

// for this example you have to use mouse or touchscreen

var app = new PIXI.Application(800, 600, {
  view: canvas
});
var stage = app.stage;

//prepare circle texture, that will be our brush
var brush = new PIXI.Graphics();
brush.beginFill(0xffffff);
brush.drawCircle(0, 0, 50);
brush.endFill();

PIXI.loader.add("t1", "https://pixijs.io/examples/examples/assets/bg_grass.jpg")
PIXI.loader.add("t2", "https://pixijs.io/examples/examples/assets/bg_rotate.jpg")
PIXI.loader.load(setup);

function setup(loader, resources) {
  var background = new PIXI.Sprite(resources["t1"].texture);
  stage.addChild(background);
  background.width = app.screen.width;
  background.height = app.screen.height;

  app.stage.interactive = true;
  app.stage.on('pointerdown', pointerDown);
  app.stage.on('pointerup', pointerUp);
  app.stage.on('pointermove', pointerMove);
  app.stage.addChild(brush)

  var dragging = false;

  function pointerMove(event) {
    // draw circle every time
    function drawCircle() {
      brush.beginFill(0x000000);
      brush.drawCircle(event.data.global.x, event.data.global.y, 10);
      brush.endFill()
    }

    // convert to sprite
    function convertToSprite() {
      const point = { ...event.data.global
      }
      drawCircle();
      const texture = app.renderer.generateTexture(brush);
      const sprite = new PIXI.Sprite(texture);
      sprite.x = point.x;
      sprite.y = point.y;
      brush.clear();
      app.stage.addChild(sprite);
    }

    function seperateToSegment() {
      if (brush.graphicsData.length >= 100) {
        brush = new PIXI.Graphics();
        app.stage.addChild(brush);
      }
      drawCircle();
    }

    function convertPartGraphics() {
      // if graphicsData too larger, converts to sprite, not converts every times
    }

    if (dragging) {
      seperateToSegment()
    }
  }

  console.log(app.stage)

  function pointerDown(event) {
    dragging = true;
    pointerMove(event);
  }

  function pointerUp(event) {
   ...