CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.6.4

In What environments are you experiencing the problem?

Chrome, Safari, Opera, Microsoft Edge, Firefox

Node Version (if applicable)

None

Link To Reproduction

https://codepen.io/kudze/pen/JooZNwW

Steps To Reproduce

1. Create canvas
2. Add text with flag emoji and specify charspacing so that variable shortCut is false.

Reason behind error:

Well the error happens because in case charSpacing is specified it will render the text by each character seperately.

The lines divided by character are stored seperately in _textLines attribute, it is generated by _splitTextIntoLines method.

The problem is that the flag emoji is constructed from two Unicode characters (source) and the graphemeSplit function will return it as two separate characters.

I'll try to make a pr to bugfix this if this doesnt turn too difficult to change.

Expected Behavior

The flag emoji should render correctly:

Actual Behavior

The emoji flag does not render correctly:

Error Message & Stack Trace