import { createApplication, drawCircle } from "../pixi/Application";
const app = createApplication();

  const container = useRef<any>(null);

  const canvasRef = useRef(null);
  const [counter, setCounter] = useState(0);
  const [width, height, pixelRatio] = [200, 100, 1.0];

    const current: HTMLCanvasElement = canvasRef.current!;
    current.onclick = (e) => {
      console.log(e);
    };

    container.current?.appendChild(app.view);

  useEffect(() => {
    if (!counter) {
      initialBackground();
    }
    const canvas: HTMLCanvasElement = canvasRef.current as any;
    const ctx = canvas.getContext("2d")!;

    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.arc(width / 2 + counter, height / 2, width / 4, 0, Math.PI * 2);
    ctx.stroke();
  }, [counter]);
  const initialBackground = () => {
    const canvas: HTMLCanvasElement = canvasRef.current as any;
    const ctx = canvas.getContext("2d")!;
    ctx.save();
    ctx.scale(pixelRatio, pixelRatio);
    ctx.fillStyle = "hsl(0, 0%, 95%)";
    ctx.fillRect(0, 0, width, height);
    ctx.restore();
  };

    <canvas
      ref={canvasRef}
      width={window.innerWidth * 0.875}
      height={window.innerHeight * 0.875}
      onClick={(e) => {
        console.log(e.target);
        setCounter((count) => count + 1);
        alert(e.clientX);
      }}
    />

    <>
      <div ref={container} />
      <button onClick={() => drawCircle()}>text</button>
    </>

import * as Pixi from "pixi.js";
var app: Pixi.Application;
export function createApplication() {
  app = new Pixi.Application({
    antialias: true,
    backgroundColor: 0xffffff,
  });
  return app;
}
export function drawCircle() {
  const graphics = new Pixi.Graphics();
  graphics.lineStyle(2, 0xfeeb77, 1);
  graphics.beginFill(0x650a5a, 1);
  graphics.drawCircle(250, 250, 50);
  graphics.endFill();
  app.stage.addChild(graphics);
}