prompt is cropped when using an emoji

[ninmonkey]

Issue Description

render and share commands crops/duplicates characters when unicode is used. The play command displays it correctly.

• tops of characters is cropped
• first letter of the command being ran is duplicated
• the prompt renders a gray > on top of 🐒 instead of 🐒>`

Expected Behaviour

When ran locally with play, it displays correctly

terminalizer play .\ipconfig.yml

Actual Behaviour

render and share have errors

screenshot of this: https://terminalizer.com/view/d64a30ea4390

How to Reproduce Behavior?

Set your prompt to this:

function Prompt {
    "`n`u{1f412}> "
}

It's fixed by using:

function Prompt {
    "`nnin> "
}

## config.yml (expand)

# Specify a command to be executed
# like `/bin/bash -l`, `ls`, or any other commands
# the default is bash for Linux
# or powershell.exe for Windows
command: pwsh.exe -nol

# Specify the current working directory path
# the default is the current working directory path
cwd: null

# Export additional ENV variables
env:
    recording: true
    # terminalize_prompt: true

# Explicitly set the number of columns
# or use `auto` to take the current
# number of columns of your shell
cols: auto

# Explicitly set the number of rows
# or use `auto` to take the current
# number of rows of your shell
rows: auto

# Amount of times to repeat GIF
# If value is -1, play once
# If value is 0, loop indefinitely
# If value is a positive number, loop n times
repeat: 0

# Quality
# 1 - 100
quality: 100

# Delay between frames in ms
# If the value is `auto` use the actual recording delays
frameDelay: auto

# Maximum delay between frames in ms
# Ignored if the `frameDelay` isn't set to `auto`
# Set to `auto` to prevent limiting the max idle time
maxIdleTime: 2000

# The surrounding frame box
# The `type` can be null, window, floating, or solid`
# To hide the title use the value null
# Don't forget to add a backgroundColor style with a null as type
frameBox:
    type: floating
    title: Terminalizer
    style:
        border: 0px black solid
        # boxShadow: none
        # margin: 0px

# Add a watermark image to the rendered gif
# You need to specify an absolute path for
# the image on your machine or a URL, and you can also
# add your own CSS styles
watermark:
    imagePath: null
    style:
        position: absolute
        right: 15px
        bottom: 15px
        width: 100px
        opacity: 0.9

# Cursor style can be one of
# `block`, `underline`, or `bar`
cursorStyle: block

# Font family
# You can use any font that is installed on your machine
# in CSS-like syntax
fontFamily: "Cascadia Mono, Monaco, Lucida Console, Ubuntu Mono, Monospace"

# The size of the font
fontSize: 12

# The height of lines
lineHeight: 1

# The spacing between letters
letterSpacing: 0

# Theme
theme:
    background: "transparent"
    foreground: "#afafaf"
    cursor: "#c7c7c7"
    black: "#232628"
    red: "#fc4384"
    green: "#b3e33b"
    yellow: "#ffa727"
    blue: "#75dff2"
    magenta: "#ae89fe"
    cyan: "#708387"
    white: "#d5d5d0"
    brightBlack: "#626566"
    brightRed: "#ff7fac"
    brightGreen: "#c8ed71"
    brightYellow: "#ebdf86"
    brightBlue: "#75dff2"
    brightMagenta: "#ae89fe"
    brightCyan: "#b1c6ca"
    brightWhite: "#f9f9f4"

If I set font to use Cascadia Mono it still breaks on share https://terminalizer.com/view/b013a5af4392

Cause

It doesn't seem to be a unicode decoding issue. Does the <canvas> use dirty rects for performance? Maybe it's miscalculating the width and height of the text basing it off the codepoint, because it's multi-byte?