JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

JavaScript

const WIDTH = 200
const HEIGHT = 100
const TEXTS = 'ShoTime1,000人'

canvas = document.createElement('canvas')
canvas.width = WIDTH
canvas.height = HEIGHT
ctx = canvas.getContext('2d')

// background
ctx.fillStyle = '#4fc08d'
ctx.fillRect(0, 0, WIDTH, HEIGHT)

// texts
let textArray = toArrayFromText(TEXTS, 7)
ctx.font = `700 30px "Roboto Mono"`
ctx.fillStyle = '#fff'
textArray.forEach((t, index) => {
  ctx.fillText(t, 10, 40 + (index * 40))
})

// Render
const app = document.getElementById('app')
app.innerHTML = ''
app.appendChild(canvas)

function toArrayFromText (text, maxLength) {
  if (typeof text !== 'string') return
  else if (typeof maxLength !== 'number') maxLength = 10
	return text.match(new RegExp('.{1,' + maxLength + '}', 'g'))
}