html2canvas
html2canvas copied to clipboard
Improve text performance by combining words in the same line
Summary
Normally, html2canvas splits the text into words before rendering for word wrapping to work correctly. However this causes too many calls to ctx.fillText
as each word is rendered separately.
This PR combines multiple words in each line so that only one fillText
call is done for each line.
Note that this does not change anything if letter-spacing
is not 0
. Because each letter (grapheme) should be rendered separately in that case.
Explain the motivation for making this change. What existing problem does the pull request solve?
The performance cost itself is normally not a big deal. But I made this fix specifically for this issue in jsPDF
: https://github.com/parallax/jsPDF/issues/3137
jsPDF
uses a different canvas implementation and each call to fillText
increases the performance cost. This PR can reduce the number of render calls about 10 times.
Test plan (required)
Demonstrate how the issue/feature can be replicated. For most cases, simply adding an appropriate html/css template into the reftests should be sufficient. Please see other tests there for reference.
This should not change any functionality or how the text is rendered. It just increases the text rendering performance. The effect of rendering performance to an image may be unnoticable. But it will be noticable for users of jsPDF.
Code formatting
Please make sure that code adheres to the project code formatting. Running
npm run format
will automatically format your code correctly.
Done.
+1 to this. The selection of text in the resulted pdf becomes almost unusable because of this