Делать прямоугольник с закругленными углами с помощью Canvas в React?

Question

Я никогда не работал с холстом, и я хочу сделать прямоугольник с закругленными углами, чтобы поместить как указатель / маркер в карту открытых слоев

мой код:

// 'style' of rectangle
    var canvas = document.createElement('canvas');

    var width = 60;
    var height = 20;
    var cornerRadius = 20;

    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width, height);
    ctx.strokeRect(0, 0, width, height);
    ctx.lineCap = "round";
    ctx.lineWidth = cornerRadius;

// map code

var imageStyle = new ol.style.Icon({

      img: canvas,
      imgSize: [60, 25]
    });


    layer.setStyle(new ol.style.Style({
        image: imageStyle ,

        text: new ol.style.Text({
          text: price.toString(),
          scale: 1.3,
          fill: new ol.style.Fill({
            color: '#000000'
          }),
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 3.5
          })
        })
      }));    

    return map.addLayer(layer);
})

Этот код создает треугольник с белым фоном и черной рамкой, но я не могу поставить с закругленными углами ...

Я пробовал что-то вроде:

context.lineJoin = "round";  // or context.lineCap = "round"; 
context.lineWidth = cornerRadius;

и что-то с quadraticCurveTo() но это ничего не делает ...

Я использую зависимость 'openlayers'

Кто-то может помочь?