modern-text

Usage

import { fonts } from 'modern-font'
import { renderText } from 'modern-text'

fonts.loadFallbackFont('/fallback.woff').then(() => {
  const view = document.createElement('canvas')
  document.body.append(view)

  renderText({
    view,
    style: {
      width: 100,
      height: 200,
      fontSize: 22,
      textDecoration: 'underline',
    },
    content: [
      {
        letterSpacing: 3,
        fragments: [
          { content: 'He', color: 'red', fontSize: 12 },
          { content: 'llo', color: 'black' },
        ],
      },
      { content: ', ', color: 'grey' },
      { content: 'World!', color: 'black' },
    ],
  })
})