Animation of Hand Writing in JS | Sololearn: Learn to code for FREE!


Animation of Hand Writing in JS

How to make a writing animation using java Script in canvas of HTML 5 ? I actually know how to make typing animation but not writing animation . Please suggest me ideas and tips to make a hand writing animation in canvas No matter using bezier or quadratic curves

11/8/2018 2:53:30 PM


31 Answers

New Answer


Your question about writing on the canvas sparked my curiosity. I thought perhaps that you might be interested in today's post which is a demo of 'handwritting' on the canvas. Wishing you all the best with your project. Please see


Not sure if this will be of any help to you. It is svg rather than canvas but is an example of handwriting. See


Err.... I would suggest using an SVG path, then you animate it with CSS, like this:



With canvas/JavaScript , step 1: record the handwriting by saving all the coordinates on touchmove event in an array. step 2: playback the recorded coordinates by drawing a small circle or rectangle or triangle or a line at each point going through that array. Here's a start, but need sketch recording/playback



Have a look on this thread : The answer marked as best may solve your problem ^^

+17 just an example of svg. this one draws a butterfly, but if you make the path for cursive writing, you can simulate a pen that write the letters. just use svg editor to do your path. eg inkscape.


Look this:



Paul might help you.


i would go with svg animation, it would be easier, althougb not that easy. i think some people have given good stack overflow links already. If I remeber correctly Richard Myatt has good svg example


Rowsej I know that. I want to do that with Java Script Canvas. Do you have any Idea ?


5667ce7f99078110265cec8b75482e4ea7055780 I would store in an array all the coordinates of the pixels. That’s all I can think of!


Only typing😅


5667ce7f99078110265cec8b75482e4ea7055780 I saw this Youtube video: SVG Line Animations with Enhanced Walkway JS Check it out....




Here's my painting code. It's actually a touch and draw. One idea I can get for handwriting code is maybe by using svg?!!


Great examples so far. If u really want to use javascript. Then u can get the svg paths and use anime.js Check out the documentation for examples