Learn how to cre­ate an an­i­mated cur­sive writ­ing ef­fect

A vis­ually an­i­mated text ef­fect to present your mes­sages in the style of tra­di­tional cal­lig­ra­phy

1. De­fine the HTML doc­u­ment The first step is to de­fine the HTML doc­u­ment. This con­sists of the HTML con­tainer, which is used to store the head and body sec­tions. While the head sec­tion is used to load the ex­ter­nal Javascript, the body sec­tion is used to store page con­tent el­e­ments cre­ated in the next step.

</html> 2. Draw­ing can­vas The writ­ing ef­fect is de­pen­dent on the use of pixel ma­nip­u­la­tion, mean­ing the best tool for the job is the can­vas el­e­ment. This pro­vides ac­cess to more spe­cific tools for draw­ing ef­fects than avail­able from reg­u­lar DOM el­e­ments styled with CSS. The can­vas is set to a spe­cific width and height – al­low­ing it to act like an in­line image el­e­ment.

<can­vas width=”800” height=”150”></can­vas> 3. Can­vas ref­er­ence af­ter load Cre­ate a new file called 'code.js'. This first step of Javascript waits for the page to com­plete load­ing; then it will search for the page can­vas and to get a 2D draw­ing ref­er­ent. This is stored as the 'ctx' ref­er­ence name – to be used for draw­ing op­er­a­tions in the up­com­ing steps. win­dow.ad­de­ventlis­tener("load", func­tion() {

}); 4. Vari­able def­i­ni­tions Sev­eral vari­ables are de­fined to con­trol the out­put pre­sen­ta­tion. While 'brush­width', 'brushoff­set' and speed are used for cal­cu­la­tions re­lat­ing to the draw­ing ef­fect, 'txt' is used to de­fine what text is to be drawn to the can­vas. The x vari­able is used to con­trol the hor­i­zon­tal draw­ing po­si­tion – set to start at 30 pix­els. var brush­width = 200; var brushoff­set = brush­width; var speed = 7; var txt = "Op­por­tu­ni­ties mul­ti­ply when seized."; var x = 30, i = 0; *** STEP 5 HERE 5. Draw­ing set­tings Set­tings for the 'ctx' draw­ing ref­er­ence de­fined in step 3 are ap­plied, defin­ing the font to use, out­line width and in­ner colour to ap­ply within the text – set to black. You should take note how th­ese prop­er­ties ac­cept the same type of val­ues used for their CSS coun­ter­parts for font and colour def­i­ni­tions. ctx.font = "1cm cur­sive"; ctx.linewidth = 3; ctx.fill­style = "#000";

*** STEP 7 HERE 6. Draw­ing func­tion A func­tion called 'draw' is im­me­di­ately ex­e­cuted to ini­ti­ate the draw­ing ef­fect of the text. Firstly, the space is cleared for a clean draw­ing dis­play. Cal­cu­la­tions are used with the draw­ing ref­er­ence 'draw' part of the text – like a brush stroke. The 'i' and 'x' vari­ables re­fer to the cur­rent let­ter and its po­si­tion to present as par­tially drawn. (func­tion draw() { ctx.clear­rect(x, 0, 800, 150); ctx.set­linedash([brush­width brushoff­set, brushoff­set - speed]); brushoff­set -= speed; ctx.stroke­text(txt[i], x, 70);

*** STEP 7 HERE

})()

; 7. Draw­ing re­call While the cur­rent let­ter has not yet com­pleted draw­ing, the same 'draw' an­i­ma­tion is re­called. When the let­ter has been com­pleted, some of the set­tings for the next let­ter in the text are iden­ti­fied be­fore the 'draw' an­i­ma­tion is re­called, if the end of the text has not yet been reached. if (brushoff­set > 0) re­ques­tani­ma­tion­frame(draw); else { brushoff­set = brush­width; x += ctx.mea­sure­text(txt[i++]).width + ctx.linewidth * Math.ran­dom();