How to use the paper.setup function in paper

componentDidMount(){
    paper.setup(this.refCanvas);
    this.project = paper.View._viewsById[this.refCanvas.id]._project;
    this.view = paper.View._viewsById[this.refCanvas.id];

    var { font, message, category, screenWidth, backgroundMode, size, fontSize, letterSpacing, baseline } = this.props;
    // console.log (fontSize + "," + baseline);
    this.createGlyphPath(font, message, size, backgroundMode, fontSize, letterSpacing, baseline, screenWidth, category);
    this.project.activate();
    this.view.draw();
  }

componentDidMount() {
    // set up paperjs on the window
    this.canvas = document.getElementById('paperCanvas');
    paper.setup(this.canvas);
  }

export function initializeForceLayout(elem = "#canvas", data = null) {
    // Setup canvas
    const canvas: HTMLCanvasElement = document.querySelector(elem) as HTMLCanvasElement;
    setup(canvas);

    // Svg symbol
    initSvg(new Raster());

    // Init simulation
    let layout = ForceLayout.fromJSON(data);
    view.onFrame = (ev) => layout.update(Math.min(ev.delta, 0.032));
}

function init (options) {

	options = u.defaults(options || {}, DEFAULTS);

	paper._genart = {
		options: options,
		canvas: options.canvas || new Canvas(options.width, options.height),
	};

	paper._genart.ctx = paper._genart.canvas.getContext('2d');

	paper = u.extend(paper, Genart);

	paper.setup(paper._genart.canvas);

	paper.setBackgroundColor(options.backgroundColor);

	// extend paper's Item prototype with useful functionality
	paper.Item.prototype.tile = function(fn) {

		paper.tile(this, fn);

	};

	paper.Item.prototype.nthChild = function(n, fn) {

		if (!this.ncb) {
			this.ncb = {};
		}

draw = (canvas) => {
        paper.setup(canvas);

        let { width, height } = canvas.getBoundingClientRect();

        let center = new paper.Point(width / 2, height / 2);
        let radius = this.props.radius || height / 2 - 20;

        let bgcircle = new paper.Path.Circle(center, radius)
        bgcircle.strokeWidth = 2;
        bgcircle.strokeColor = Colors.blue_light;
        bgcircle.fillColor = Colors.blue_lightest;

        let circleSize = 5;
        let startPos = new paper.Point(center.x, 15 + circleSize);

        var line = new paper.Path.Line(center, startPos);
        line.strokeColor = Colors.blue_base;

componentDidMount(){

    paper.setup(this.refCanvas);
    this.project = paper.View._viewsById[this.refCanvas.id]._project;
    this.view = paper.View._viewsById[this.refCanvas.id];


    var { font, message, screenHeight, screenWidth, animationIdx, backgroundMode, containerHeight, size, fontSize, letterSpacing, baseline } = this.props;
    this.createGlyphPath(font, message, screenWidth, screenHeight, backgroundMode, containerHeight, size, fontSize, letterSpacing, baseline);

    this.attachAnimation(this.props);
    this.project.activate();

    this.view.draw();
  }

draw = (canvas) => {
        paper.setup(canvas);
        let colorLines = Colors.neutral_light;
        let { width, height } = canvas.getBoundingClientRect();
        let center = new paper.Point(width / 2, height / 2);

        var pathY = new paper.Path();
        pathY.strokeColor = Colors.neutral_light;
        var start = new paper.Point(center.x, 0);
        pathY.moveTo(start);
        pathY.lineTo(start.add([0, height]));

        var pathX = new paper.Path();
        pathX.strokeColor = Colors.neutral_light;
        var start = new paper.Point(0, center.y);
        pathX.moveTo(start);
        pathX.lineTo(start.add([width, 0]));

export function setupPaperJs(canvas: HTMLCanvasElement) {
  if (isPaperJsSetup) {
    return;
  }
  paper.setup(canvas);
  paper.settings.handleSize = 8;
  const defaultLayer = new paper.Layer();
  defaultLayer.name = 'Default layer';
  defaultLayer.data.isDefaultLayer = true;
  const guideLayer = new paper.Layer();
  guideLayer.name = 'Guide layer';
  guideLayer.data.isGuideLayer = true;
  guideLayer.bringToFront();
  defaultLayer.activate();
  isPaperJsSetup = true;
}

componentDidMount(){

    paper.setup(this.refCanvas);
    this.project = paper.View._viewsById[this.refCanvas.id]._project;
    this.view = paper.View._viewsById[this.refCanvas.id];


    var { letterSpacing, baseline, fontSize, font, message, screenHeight, screenWidth, animationScriptIdx, backgroundMode, size, containerHeight } = this.props;

    this.createGlyphPath(font, message, size, screenWidth, screenHeight, backgroundMode, containerHeight, fontSize, letterSpacing, baseline);

    this.attachAnimation(this.props);
    this.project.activate();

    this.view.draw();
  }

draw = (canvas) => {
        paper.setup(canvas);
        let colorLines = 'rgba(0,0,0,0.1)';
        let { width, height } = canvas.getBoundingClientRect();
        let center = new paper.Point(width / 2, height / 2);

        var myPath = new paper.Path({ strokeWidth: 2, strokeCap: 'round' });
        myPath.strokeColor = Colors.blue_base;
        myPath.fillColor = Colors.blue_light;

        let points = this.props.points || [];

        let step = (width - 10) / (points.length - 1);
        let circles = [];

        for (var i = 0; i < points.length; i++) {
            let point = new paper.Point(5 + i * step, height - points[i]);
            myPath.add(point);