JSFiddle - React, Tailwind, and code Playground

JavaScript

function drawLabel({
  text= "Label",
  color= "white",
  bgGradient= [
    [0, '#4776E6'],
    [1, '#8E54E9']
  ],
  width= 200,
  height= 60,
  padding= 10,
  borderRadius= 20
} = {}) {
  const canvas = document.createElement('canvas');
  canvas.width = width + (2 * padding);
  canvas.height = height + (2 * padding);

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

  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
  bgGradient.forEach(function(colorStop) {
    gradient.addColorStop(colorStop[0], colorStop[1]);
  });

  ctx.beginPath();
  ctx.moveTo(borderRadius + padding, padding);
  ctx.lineTo(canvas.width - borderRadius - padding, padding);
  ctx.quadraticCurveTo(canvas.width - padding, padding, canvas.width - padding, borderRadius + padding);
  ctx.lineTo(canvas.width - padding, canvas.height - borderRadius - padding);
  ctx.quadraticCurveTo(canvas.width - padding, canvas.height - padding, canvas.width - borderRadius - padding, canvas.height - padding);
  ctx.lineTo(borderRadius + padding, canvas.height - padding);
  ctx.quadraticCurveTo(padding, canvas.height - padding, padding, canvas.height - borderRadius - padding);
  ctx.lineTo(padding, borderRadius + padding);
  ctx.quadraticCurveTo(padding, padding, borderRadius + padding, padding);
  ctx.closePath();
  ctx.fillStyle = gradient;
  ctx.fill();

  ctx.fillStyle = color;
  ctx.font = 'bold ' + Math.floor(height * 0.6) + 'px Arial';

  let textWidth = ctx.measureText(text).width;

  while (textWidth > (width - (2 * padding))) {
    const fontSize = parseInt(ctx.font.match(/\d+/)[0]);
    ctx.font = 'bold ' + Math.floor(fontSize - 1) + 'px Arial';
    textWidth = ctx.measureText(text).width;
  }

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);

  return canvas;
}

const label = drawLabel({
  text: "My Label",
  color: "white",
  bgGradient: [
    [0, '#4776E6'],
    [1, '#8E54E9']
  ],
  width: 200,
  height: 60,
  padding:...