@@ -46,13 +46,13 @@ const createTextData = (
4646 }
4747
4848 // Use the supplied canvas (which should have a suitable width and height)
49- // for the final image
50- // OR
51- // create a temporary canvas just for measuring how long the canvas needs to be
49+ // for the final image.
50+ // Or create a temporary canvas just for measuring how long the canvas
51+ // needs to be.
5252 const textCanvas = canvas ?? createCanvas ( maxWidth , 100 ) ;
5353 const textContext = textCanvas . getContext ( '2d' ) ;
5454
55- // set the text alignment and start position
55+ // Set the text alignment and start position
5656 let textX = 0 ;
5757 let textY = 0 ;
5858
@@ -64,20 +64,20 @@ const createTextData = (
6464 }
6565 textContext . textAlign = textAlign ;
6666
67- // set background color
67+ // Set background color
6868 textContext . fillStyle = bgColor ;
6969 textContext . fillRect ( 0 , 0 , textCanvas . width , textCanvas . height ) ;
7070
71- // set text styles
71+ // Set text styles
7272 textContext . fillStyle = textColor ;
7373 textContext . font = `${ fontWeight . toString ( ) } ${ fontSize . toString ( ) } ${ fontFamily } ;
7474 textContext . textBaseline = 'top' ;
7575
76- // split the text into words
76+ // Split the text into words
7777 const words = text . split ( ' ' ) ;
7878 let wordCount = words . length ;
7979
80- // the start of the first line
80+ // The start of the first line
8181 let line = '' ;
8282 const addNewLines = [ ] ;
8383
@@ -86,50 +86,49 @@ const createTextData = (
8686
8787 if ( words [ n ] . includes ( '\n' ) ) {
8888 const parts = words [ n ] . split ( '\n' ) ;
89- // use the first word before the newline(s)
89+ // Use the first word before the newline(s)
9090 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
9191 word = parts . shift ( ) || '' ;
92- // mark the next word as beginning with newline
92+ // Mark the next word as beginning with newline
9393 addNewLines . push ( n + 1 ) ;
94- // return the rest of the parts to the words array at the same index
94+ // Return the rest of the parts to the words array at the same index
9595 words . splice ( n + 1 , 0 , parts . join ( '\n' ) ) ;
9696 wordCount += 1 ;
9797 }
9898
99- // append one word to the line and see
100- // if its width exceeds the maxWidth
101- // also trim the testLine since `line` will be empty in the beginning,
102- // causing a leading white space character otherwise.
99+ // Append one word to the line and see if its width exceeds the maxWidth.
100+ // Also trim the testLine since `line` will be empty in the
101+ // beginning, causing a leading white space character otherwise.
103102 // Use a negative lookbehind in the regex due to
104- // https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
103+ // https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS.
105104 const testLine = `${ line } ${ word } . replace ( / ^ + | (?< ! ) + $ / g, '' ) ;
106105 const testLineWidth = textContext . measureText ( testLine ) . width ;
107106
108- // if the line is marked as starting with a newline
109- // OR if the line is too long, add a newline
107+ // If the line is marked as starting with a newline or if the line is
108+ // too long, add a newline
110109 if ( addNewLines . includes ( n ) || ( testLineWidth > maxWidth && n > 0 ) ) {
111- // if the line exceeded the width with one additional word
112- // just paint the line without the word
110+ // If the line exceeded the width with one additional word, just
111+ // paint the line without the word
113112 textContext . fillText ( line , textX , textY ) ;
114113
115- // start a new line with the last word
116- // and add the following (if this word was a newline word)
114+ // Start a new line with the last word and add the following (if
115+ // this word was a newline word)
117116 line = word ;
118117
119- // move the pen down
118+ // Move the pen down
120119 textY += lineHeight ;
121120 } else {
122- // if not exceeded, just continue
121+ // If not exceeded, just continue
123122 line = testLine ;
124123 }
125124 }
126125
127- // paint the last line
126+ // Paint the last line
128127 textContext . fillText ( line , textX , textY ) ;
129128
130- // increase the size of the text layer by the line height,
131- // but in case the line height is less than the font size
132- // we increase by font size in order to prevent clipping
129+ // Increase the size of the text layer by the line height
130+ // But in case the line height is less than the font size, we increase
131+ // by font size in order to prevent clipping.
133132 const height = textY + Math . max ( lineHeight , fontSize ) ;
134133
135134 return {
@@ -139,13 +138,15 @@ const createTextData = (
139138} ;
140139
141140const createImageCanvas = ( content : string , conf : ComputedOptions ) => {
142- // First pass: measure the text so we can create a canvas
143- // big enough to fit the text. This has to be done since we can't
144- // resize the canvas on the fly without losing the settings of the 2D context
141+ // First pass: Measure the text so we can create a canvas big enough
142+ // to fit the text.
143+ // This has to be done since we can't resize the canvas on the fly
144+ // without losing the settings of the 2D context
145145 // https://github.com/Automattic/node-canvas/issues/1625
146146 const { textHeight } = createTextData (
147147 content ,
148- // max width of text itself must be the image max width reduced by left-right margins
148+ // Max width of text itself must be the image max width reduced by
149+ // left-right margins
149150 {
150151 maxWidth : conf . maxWidth - conf . margin * 2 ,
151152 fontSize : conf . fontSize ,
@@ -165,15 +166,16 @@ const createImageCanvas = (content: string, conf: ComputedOptions) => {
165166 console . warn ( 'Text is longer than customHeight, clipping will occur.' ) ;
166167 }
167168
168- // Second pass: we now know the height of the text on the canvas,
169- // so let's create the final canvas with the given height and width
170- // and pass that to createTextData so we can get the text data from it
169+ // Second pass: We now know the height of the text on the canvas, so
170+ // let's create the final canvas with the given height and width and
171+ // pass that to createTextData so we can get the text data from it
171172 const height = conf . customHeight || textHeightWithMargins ;
172173 const canvas = createCanvas ( conf . maxWidth , height ) ;
173174
174175 const { textData } = createTextData (
175176 content ,
176- // max width of text itself must be the image max width reduced by left-right margins
177+ // Max width of text itself must be the image max width reduced by
178+ // left-right margins
177179 {
178180 maxWidth : conf . maxWidth - conf . margin * 2 ,
179181 fontSize : conf . fontSize ,
@@ -189,8 +191,8 @@ const createImageCanvas = (content: string, conf: ComputedOptions) => {
189191 ) ;
190192 const ctx = canvas . getContext ( '2d' ) ;
191193
192- // the canvas will have the text from the first pass on it,
193- // so start by clearing the whole canvas and start from a clean slate
194+ // The canvas will have the text from the first pass on it, so start by
195+ // clearing the whole canvas and start from a clean slate
194196 ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
195197 ctx . globalAlpha = 1 ;
196198 ctx . fillStyle = conf . bgColor ;
@@ -200,11 +202,12 @@ const createImageCanvas = (content: string, conf: ComputedOptions) => {
200202 let textY = conf . margin ;
201203 if ( conf . customHeight && conf . verticalAlign === 'center' ) {
202204 textY =
203- // divide the leftover whitespace by 2
205+ // Divide the leftover whitespace by 2
204206 ( conf . customHeight - textData . height ) / 2 +
205- // offset for the extra space under the last line to make bottom and top whitespace equal
206- // but only up until the bottom of the text
207- // (i.e. don't consider a linheight less than the font size)
207+ // Offset for the extra space under the last line to make bottom
208+ // and top whitespace equal.
209+ // But only up until the bottom of the text (i.e. don't consider a
210+ // line height less than the font size)
208211 Math . max ( 0 , ( conf . lineHeight - conf . fontSize ) / 2 ) ;
209212 }
210213
0 commit comments