Method renderChildren

src/Document/TextPathElement.ts:174–238

(ctx: RenderingContext2D)

  }

  override renderChildren(ctx: RenderingContext2D) {
    this.setTextData(ctx)
    ctx.save()

    const textDecoration = this.parent.getStyle('text-decoration').getString()
    const fontSize = this.getFontSize()
    const { glyphInfo } = this
    const fill = ctx.fillStyle

    if (textDecoration === 'underline') {
      ctx.beginPath()
    }

    glyphInfo.forEach((glyph, i) => {
      const {
        p0,
        p1,
        rotation,
        text: partialText
      } = glyph

      ctx.save()
      ctx.translate(p0.x, p0.y)
      ctx.rotate(rotation)

      if (ctx.fillStyle) {
        ctx.fillText(partialText, 0, 0)
      }

      if (ctx.strokeStyle) {
        ctx.strokeText(partialText, 0, 0)
      }

      ctx.restore()

      if (textDecoration === 'underline') {
        if (i === 0) {
          ctx.moveTo(p0.x, p0.y + fontSize / 8)
        }

        ctx.lineTo(p1.x, p1.y + fontSize / 5)
      }

      // // To assist with debugging visually, uncomment following
      //
      // ctx.beginPath();
      // if (i % 2)
      //   ctx.strokeStyle = 'red';
      // else
      //   ctx.strokeStyle = 'green';
      // ctx.moveTo(p0.x, p0.y);
      // ctx.lineTo(p1.x, p1.y);
      // ctx.stroke();
      // ctx.closePath();
    })

    if (textDecoration === 'underline') {
      ctx.lineWidth = fontSize / 20