Konva, how to make a class represent a Button

Question

How to implement a user defined class that represent a Button, using the Konva frameWork.

I try to implement a class named johnkscienceButton that represent a Button as you can see bellow. I try a solution with a factory function.

1 let johnkscienceButtonF = function (config){
2    let button  = new Konva.Group({
3        x: config.x,
4        y: config.y,
5        });
6    
7    let text = new Konva.Text({
8        x:config.x+config.padding,
9        y:config.y+config.padding,
10        text: config.text,
11       fontSize: config.fontSize,
12        fontFamily:config.fontFamily,
13        fill: config.fontColor,
14        })
15
16    let box = new Konva.Rect({
17        x: config.x,
18        y: config.y,
19        width: text.width()+2*config.padding, 
20        //width: johnkscienceFormatedTextMeasure(theContext, config.text,
21        //                         config.fontFamily, config.fontSize).width,
22        height: config.fontSize+2*config.padding,
23        name: config.name,
24        fill: config.fill,
25        stroke: config.stroke,
26        strokeWidth: config.strokeWidth,
27        cornerRadius: config.cornerRadius,
28        opacity:0.7,
29    });
30
31    button.add(box);
32    button.add(text);
33
34    button.on('mouseover', function () {
35        box.opacity(1);
36      });
37    button.on('mouseout', function () {
38        box.opacity(0.7);
39    });
40    button.on('click', config.onClickFunc);
41
42    button.fill = function (color) {
43        box.fill(color);
44    }
45
46    return button;
47
48 }

My questions are,

1. if that approach is acceptable

2. (line 20, 21) i don't know how to get and pass the context of canvas into my function johnkscienceFormatedTextMeasure( canvas.context, text, fontFamily, fontSize)

Later i use this class like:

      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      
      var button1 = new johnkscienceButtonF({
        x:20,
        y:50,
        name: 'κουμπί1',
        fill:'lightgreen',
        stroke:'gray',
        strokeWidth:1,
        cornerRadius:3,
        fontSize:14,
        fontFamily:'Arial',
        fontColor:'red',
        text:'Ανανέωση',
        padding:5,
        onClickFunc: function () {
           console.log('button 1')
          },
        
        });

      var button2 = new johnkscienceButtonF({
        x:20,
        y:100,
        name: 'κουμπί2',
        fill:'lightblue',
        stroke:'gray',
        strokeWidth:1,
        cornerRadius:3,
        fontSize:14,
        fontFamily:'Arial',
        fontColor:'red',
        text:'Υπολόγισε',
        padding:5,
        onClickFunc: function () {
           console.log('button 2')
          },
        
        });

      layer.add(button1);
      layer.add(button2);
      stage.add(layer);

      //button1.fill('lightBlue');