Animation of Hand Writing in JS | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 97

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

8th Nov 2018, 2:53 PM
Googel - avatar
27 Answers
+ 10
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
12th Nov 2018, 10:30 PM
Richard Myatt
Richard Myatt - avatar
+ 72
Not sure if this will be of any help to you. It is svg rather than canvas but is an example of handwriting. See
9th Nov 2018, 3:15 PM
Richard Myatt
Richard Myatt - avatar
+ 40
Err.... I would suggest using an SVG path, then you animate it with CSS, like this:
8th Nov 2018, 9:22 PM
Rowsej - avatar
+ 34
10th Nov 2018, 4:59 AM
Amadeus - avatar
+ 19
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
9th Nov 2018, 6:22 PM
Morpheus - avatar
+ 18
9th Nov 2018, 11:01 PM
Ulisses Cruz
Ulisses Cruz - avatar
+ 17
Have a look on this thread : The answer marked as best may solve your problem ^^
9th Nov 2018, 3:56 PM
Nikhil - avatar
9th Nov 2018, 7:19 PM
Serhat İbin
Serhat İbin - avatar
+ 15
9th Nov 2018, 5:13 PM
Florinn - avatar
+ 12
Paul might help you.
9th Nov 2018, 3:27 PM
ᴰᴼᴹᴵᴺᴼ - avatar
+ 11
Rowsej I know that. I want to do that with Java Script Canvas. Do you have any Idea ?
9th Nov 2018, 2:54 AM
Googel - avatar
+ 10
5667ce7f99078110265cec8b75482e4ea7055780 I would store in an array all the coordinates of the pixels. That’s all I can think of!
9th Nov 2018, 4:47 AM
Rowsej - avatar
9th Nov 2018, 5:16 PM
renamed - avatar
+ 7
5667ce7f99078110265cec8b75482e4ea7055780 I saw this Youtube video: SVG Line Animations with Enhanced Walkway JS Check it out....
10th Nov 2018, 2:21 AM
Ikechukwu Okonkwo
Ikechukwu Okonkwo - avatar
+ 5
9th Nov 2018, 3:18 PM
Jitender Kashyap
Jitender Kashyap - avatar
+ 5
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?!!
10th Nov 2018, 11:43 AM
Шащи Ранжан
Шащи Ранжан - avatar
+ 4
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
9th Nov 2018, 3:23 PM
nitrocyborc - avatar
+ 4
Make a cheatsheet and be a cheater
10th Nov 2018, 2:01 AM
Nishant Singh Tomar
Nishant Singh Tomar - avatar
10th Nov 2018, 2:06 PM
Vishal Kumar