How to use the konva.Text function in konva

const w = this.width();
        const h = this.height();

        this.background = new Konva.Rect({
            name: 'background',
            x: 0,
            y: 0,
            width: w,
            height: h,
            cornerRadius: 0.12 * h,
            fill: 'black',
            opacity: 0.6,
        });
        this.add(this.background);

        const text = new Konva.Text({
            x: 0,
            y: 0.275 * h, // 0.25 is too high for some reason
            width: w,
            height: 0.5 * h,
            fontSize: 0.5 * h,
            fontFamily: 'Verdana',
            fill: 'white',
            align: 'center',
            text: config.number.toString(),
            listening: false,
        });
        this.add(text);

        const resetButton = () => {
            this.background.fill('black');
            const layer = this.getLayer();

fill: 'black',
    })
    courseTxt.offsetX(courseTxt.width() / 2)
    
    const achievemTxt = new Konva.TextPath({
      x: 10, y: 306,
      fill: '#EEE',
      fontSize: 14,
      fontStyle: 'bold',
      fontFamily: 'Arial',
      text: achievement,
      // text: 'qualified',
      data: 'M288 44 C 284 72, 342 72, 340 30'
    })

    const qore = new Konva.Text({
      x: 310, y: 324,
      fontFamily: 'Bitter Bold',
      fontSize: 30,
      text: achievement?achievement[0]:'-',
      fill: 'white',
    })
    textLayer.add(qore)
    textLayer.add(achievemTxt)
    textLayer.add(courseTxt)
    textLayer.add(dateTxt)
    textLayer.add(sigitureTxt)
    textLayer.add(textpath)
    textLayer.add(userTxt)
    textLayer.draw()

    setTimeout(()=>{

drawAllText(textLayer, courseName, achievement, dateObj) {
    textLayer.destroyChildren()// clear first

    const textpath = new Konva.TextPath({
      x: 0,
      y: 0,
      fill: '#7D9EC0',
      fontSize: 14,
      fontFamily: 'Arial',
      text: 'ULTRONELE',
      data: 'M280 40 C 290 22, 340 22, 360 40'
    })
    const userName = this.state.userFullName
    const userTxt = new Konva.Text({
      x: 280, y: 196,
      fontFamily: 'Bitter Bold',
      fontSize: 24,
      fontStyle: 'bold',
      text: userName,
      fill: 'black',
    })
    const { signiture } = this.props
    const sigitureTxt = new Konva.Text({
      x: 446, y: 356,
      fontFamily: 'Permanent Marker',
      fontSize: 20,
      fontStyle: 'bold',
      text: signiture?signiture:'Unknown',
      fill: 'black',
    })

constructor(config: Konva.ContainerConfig) {
        super(config);
        this.listening(true);

        this.cardBack = new Konva.Image({
            x: 0,
            y: 0,
            width: this.width(),
            height: this.height(),
            image: globals.cardImages.get('deck-back')!,
        });
        this.add(this.cardBack);
        this.cardBack.on('dragend', this.dragEnd);

        // The text that shows the number of cards remaining in the deck
        this.numLeftText = new Konva.Text({
            fill: 'white',
            stroke: '#222222',
            strokeWidth: 3,
            align: 'center',
            x: 0,
            y: 0.3 * this.height(),
            width: this.width(),
            height: 0.4 * this.height(),
            fontSize: 0.4 * this.height(),
            fontFamily: 'Verdana',
            fontStyle: 'bold',
            text: globals.deckSize.toString(),
            listening: false,
        });
        this.add(this.numLeftText);

drawLegend(layer) {

    var startCle = new Konva.Circle({
      x: 680,
      y: 340,
      radius: 6,
      fill: '#47BA47',
      stroke: 'black',
      strokeWidth: 2
    });
    layer.add(startCle)

    var startTxt = new Konva.Text({
      x: 700,
      y: 334,
      text: 'Start',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: 'green'
    });
    layer.add(startTxt)

    var unlockCle = new Konva.Circle({
      x: 680,
      y: 360,
      radius: 6,
      fill: '#EEC900',
      stroke: 'black',
      strokeWidth: 2

opacity: 1,
        listening: false,
      }),

      tooltip_tag: new Konva.Tag({
        cornerRadius: 4,
        fill: self.options.tooltip.fill,
        lineJoin: 'round',
        listening: false,
        pointerHeight: 10,
        pointerWidth: 18,
        stroke: self.options.tooltip.stroke,
        strokeWidth: 2,
      }),

      tooltip_text: new Konva.Text({
        fontFamily: self.options.font.family,
        fontSize: 10,
        padding: 8,
        fill: self.options.tooltip.text_fill,
        listening: false,
        align: 'center',
        lineHeight: 1.2,
      }),

      node: new Konva.Line({
        stroke: 'grey',
        strokeWidth: 2,
        lineCap: 'square',
        lineJoin: 'round',
        listening: false,
      }),

fill: LABEL_COLOR,
        stroke: '#747278',
        strokeWidth: 1,
        text: 'Loading...',
        align: 'center',
        x: 0,
        y: 0.7 * winH,
        width: winW,
        height: 0.05 * winH,
        fontFamily: 'Arial',
        fontStyle: 'bold',
        fontSize: 0.05 * winH,
    });
    loadingLayer.add(loadingLabel);

    const progresslabel = new Konva.Text({
        fill: LABEL_COLOR,
        stroke: '#747278',
        strokeWidth: 1,
        text: '0 / 0',
        align: 'center',
        x: 0,
        y: 0.8 * winH,
        width: winW,
        height: 0.05 * winH,
        fontFamily: 'Arial',
        fontStyle: 'bold',
        fontSize: 0.05 * winH,
    });
    loadingLayer.add(progresslabel);

    globals.stage!.add(loadingLayer);

fontFamily: 'Verdana',
        fontSize: 0.08 * winH,
        text: 'Game Paused',
        align: 'center',
        fill: 'white',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: {
            x: 0,
            y: 0,
        },
        shadowOpacity: 0.9,
    });
    globals.elements.pauseArea.add(pauseTitle);

    globals.elements.pauseText = new Konva.Text({
        y: 0.21 * winH,
        width: pauseAreaValues.w * winW,
        fontFamily: 'Verdana',
        fontSize: 0.05 * winH,
        text: 'by: [username]',
        align: 'center',
        fill: 'white',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: {
            x: 0,
            y: 0,
        },
        shadowOpacity: 0.9,
    });
    globals.elements.pauseArea.add(globals.elements.pauseText);

fontFamily: 'Calibri',
      fill: '#EE7942'
    });
    layer.add(quizTxt)

    var completeCle = new Konva.Circle({
      x: 680,
      y: 400,
      radius: 6,
      fill: '#EE0000',
      stroke: 'black',
      strokeWidth: 2
    });
    layer.add(completeCle)
  
    var completeTxt = new Konva.Text({
      x: 700,
      y: 394,
      text: 'Complete',
      fontSize: 14,
      fontFamily: 'Calibri',
      fill: '#EE0000'
    });
    layer.add(completeTxt)
  }

});
        this.add(this.background);

        const color = new Konva.Rect({
            x: 0.1 * w,
            y: 0.1 * h,
            width: 0.8 * w,
            height: 0.8 * h,
            cornerRadius: 0.12 * 0.8 * h,
            fill: config.color,
            opacity: 0.9,
            listening: false,
        });
        this.add(color);

        const text = new Konva.Text({
            x: 0,
            y: 0.2 * h,
            width: w,
            height: 0.6 * h,
            fontSize: 0.5 * h,
            fontFamily: 'Verdana',
            fill: 'white',
            stroke: 'black',
            strokeWidth: 1,
            align: 'center',
            text: config.text,
            visible: showColorblindUI,
            listening: false,
        });
        this.add(text);