How to use konva - 10 common examples

componentDidMount() {
    const stageW = 640
    const stageH = 450
    this.stage = new Konva.Stage({
      container: 'certiCntnr',
      width: stageW,
      height: stageH
    })
    // certificat template image
    const imageObj = new Image()
    // load template image file...
    const imageLayer = new Konva.Layer()
    const textLayer = new Konva.Layer()
    imageObj.onload = function(e) {
      let certiImage = new Konva.Image({
        x: 0, y: 0,
        image: imageObj,
        width: stageW, height: stageH
      })
      imageLayer.add(certiImage)
      imageLayer.draw()
    }
    imageObj.src = '/img/certemplateA_from_dreamstime.com_s.png'
    this.stage.add(imageLayer)
    this.stage.add(textLayer)
    // start to redraw cert texts....
    const firstCt = this.state.certs[0]
    if(!firstCt) return console.log('no certificate yet...');

componentDidMount() {
    const stageW = 640
    const stageH = 450
    this.stage = new Konva.Stage({
      container: 'certiCntnr',
      width: stageW,
      height: stageH
    })
    // certificat template image
    const imageObj = new Image()
    // load template image file...
    const imageLayer = new Konva.Layer()
    const textLayer = new Konva.Layer()
    imageObj.onload = function(e) {
      let certiImage = new Konva.Image({
        x: 0, y: 0,
        image: imageObj,
        width: stageW, height: stageH
      })
      imageLayer.add(certiImage)
      imageLayer.draw()
    }
    imageObj.src = '/img/certemplateA_from_dreamstime.com_s.png'
    this.stage.add(imageLayer)
    this.stage.add(textLayer)
    // start to redraw cert texts....
    const firstCt = this.state.certs[0]
    if(!firstCt) return console.log('no certificate yet...');

y: 80,
        width: 100,
        height: 20,
        fillLinearGradientStartPoint: {
          x: 0,
          y: 80,
        },
        fillLinearGradientEndPoint: {
          x: 100,
          y: 80,
        },
        stroke: self.options.tooltip.stroke,
        strokeWidth: 1,
      }),

      image: new Konva.Image({
        stroke: '#D2D2D2',
        strokeWidth: 1,
      }),
    };

    self.paths_ref = {
      zoom_icon: 'M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM15.687,9.051h-4v2.833H8.854v4.001h2.833v2.833h4v-2.834h2.832v-3.999h-2.833V9.051z',
      unzoom_icon: 'M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM8.854,11.884v4.001l9.665-0.001v-3.999L8.854,11.884z',
      lightbulb: 'M15.5,2.833c-3.866,0-7,3.134-7,7c0,3.859,3.945,4.937,4.223,9.499h5.553c0.278-4.562,4.224-5.639,4.224-9.499C22.5,5.968,19.366,2.833,15.5,2.833zM15.5,28.166c1.894,0,2.483-1.027,2.667-1.666h-5.334C13.017,27.139,13.606,28.166,15.5,28.166zM12.75,25.498h5.5v-5.164h-5.5V25.498z',
    };

    // start plugin
    self.init();
  }

// put this circle hit area into array for later detect
      this.hitTestPots.push({
        rect: {tx:cStartX-10, ty:cStartY-10, bx:cStartX+10, by:cStartY+10}, 
        title: t.title
      })
      // save the last end point
      lEndX = parseInt((i+1)/6)%2?(cStartX - distance):(cStartX + distance)
      lEndY = cStartY
      // the 6th point line, reset end x/y
      if(i>0 && (i+1)%6===0){//get line down in the n 6th point
        // console.log('draw down line ...')
        lEndX = cStartX
        lEndY = cStartY + distance
      }
      // line
      var line = new Konva.Line({
        points: [cStartX, cStartY, lEndX, lEndY],
        stroke: 'black',
        strokeWidth: 2,
      });

      var arc = new Konva.Arc({
        x: cStartX,
        y: cStartY,
        innerRadius: 4,
        outerRadius: 6,
        angle: 90,
        fill: 'white',
      });

      var vline = new Konva.Line({
        points: [cStartX, cStartY, cStartX, (i%2)?cStartY-30:cStartY+30],

shadowOpacity: 0.9,
        visible: false,
        listening: true,
    });
    globals.layers.get('UI')!.add(sharedReplayLeaderLabel);
    globals.elements.sharedReplayLeaderLabel = sharedReplayLeaderLabel;

    // Add an animation to alert everyone when shared replay leadership has been transfered
    globals.elements.sharedReplayLeaderLabelPulse = new Konva.Tween({
        node: sharedReplayLeaderLabel,
        width: size * 2,
        height: size * 2,
        offsetX: 0.025 * winH,
        offsetY: 0.025 * winH,
        duration: 0.5,
        easing: Konva.Easings.EaseInOut,
        onFinish: () => {
            if (globals.elements.sharedReplayLeaderLabelPulse) {
                globals.elements.sharedReplayLeaderLabelPulse.reverse();
            }
        },
    });
    globals.elements.sharedReplayLeaderLabelPulse.anim.addLayer(globals.layers.get('UI'));

    // Tooltip for the crown
    sharedReplayLeaderLabel.tooltipName = 'leader';
    // This will get filled in later by the "replayLeader" command
    sharedReplayLeaderLabel.tooltipContent = '';
    tooltips.init(sharedReplayLeaderLabel, false, true);

    // The user can right-click on the crown to pass the replay leader to an arbitrary person
    sharedReplayLeaderLabel.on('click', (event) => {

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);

const drawClueAreaDisabled = () => {
    // We fade the clue area and draw a rectangle on top of it when there are no clues available
    globals.elements.clueAreaDisabled = new Konva.Group({
        x: clueAreaValues.x * winW,
        y: clueAreaValues.y * winH,
        width: clueAreaValues.w! * winW,
    });

    // A transparent rectangle to stop clicks
    const rect = new Konva.Rect({
        width: clueAreaValues.w! * winW,
        height: clueAreaValues.h! * winH,
        listening: true, // It must listen or it won't stop clicks
    });
    globals.elements.clueAreaDisabled.add(rect);

    const spacing = {
        x: 0.075,
        y: 0.03,
    };
    const lineColor = '#1a1a1a';

    // The line from top-left to bottom-right
    const line1 = new Konva.Line({
        points: [
            spacing.x * winW,