<Area data={"foo"} />

      <Area />

import { Application } from "../pixi/Application";

 * HTML canvas react typescript references:
 * https://reactjs.org/docs/hooks-reference.html#useref
 * https://itnext.io/using-react-hooks-with-canvas-f188d6e416c0
 * https://codesandbox.io/s/8k7qro3wvj
 * https://stackoverflow.com/questions/13669404/typescript-problems-with-type-system
 * https://medium.com/@martin.crabtree/react-creating-an-interactive-canvas-component-e8e88243baf6
 * https://codepen.io/techslides/pen/zowLd
 * https://www.w3schools.com/html/html5_canvas.asp
 * https://eloquentjavascript.net/17_canvas.html
 * @param props

 * Initialize the pixi app

import { Application } from "../pixi/Application";

export function Area(props: { data: string }) {
  let { data } = props;
  const container = useRef<any>(null);

export function Area(props: { whatever?: any }) {
  const container = useRef<HTMLDivElement>(null);

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

    application.register(container.current!);

      <button onClick={() => application.drawCircle()}>text</button>

      <button onClick={() => application.drawCircle()}>draw circle</button>
      <button onClick={() => application.drawStart()}>rerender all</button>

  aspectRatio: number;

  canvasAspectRatio: number;

  aspectRatio: 1.5,

  canvasAspectRatio: 1.5,

  recursiveOffset: 0.210,

  recursiveOffset: 0.21,

  /**
   * Need to provide config to set up the pixi canvas
   */

  }
  /**
   * Please only call once!!
   */
  public register(curr: HTMLDivElement) {
    curr.appendChild(this.app.view);

  /**
   * Draws a full skill tree at the default zoom level.
   */
  public drawAll() {}
  /**
   * Used for panning/zooming.
   */
  public moveViewport(center: Point) {
  }

      const newWidth = newHeight / this.config.aspectRatio;

      const newWidth = newHeight / this.config.canvasAspectRatio;

      const newHeight = newWidth / this.config.aspectRatio;

      const newHeight = newWidth / this.config.canvasAspectRatio;

    width = height * this.config.aspectRatio

    width = height * this.config.canvasAspectRatio

    graphics.lineStyle(1, 0x000000, 1);

      graphics.lineStyle(1, 0x000000, 1);

    graphics.lineStyle(1, 0xc0c0c0, 1);

      graphics.lineStyle(1, 0xc0c0c0, 1);