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 https://code.sololearn.com/WCy4z3JGlcmu/?ref=app


Not sure if this will be of any help to you. It is svg rather than canvas but is an example of handwriting. See https://code.sololearn.com/WCbORDDI0sis/?ref=app


5667ce7f99078110265cec8b75482e4ea7055780 Do you mean like this😅 https://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page second http://www.java2s.com/Tutorials/Javascript/Canvas_How_to/Animation/Create_character_Typing_in_animation.htm


Err.... I would suggest using an SVG path, then you animate it with CSS, like this: https://code.sololearn.com/W5d3CeN9n8ee/?ref=app


https://code.sololearn.com/WFym3ebOYARa/?ref=app https://code.sololearn.com/W3R57lIN7waZ/?ref=app


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 https://code.sololearn.com/WxJlEOqLV5IL/?ref=app


https://code.sololearn.com/WgENW3KvMA1F/?ref=app https://code.sololearn.com/WhiNb9BkJUVC/?ref=app


https://code.sololearn.com/WOLeSEIPkAc6/?ref=app 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: https://code.sololearn.com/WT8fn1jI2jIG/?ref=app


Have a look on this thread : https://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page The answer marked as best may solve your problem ^^


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😅 https://code.sololearn.com/WXj9RBI36Uwb/?ref=app


5667ce7f99078110265cec8b75482e4ea7055780 I saw this Youtube video: SVG Line Animations with Enhanced Walkway JS https://www.youtube.com/watch?v=Tqevz4ZyT7E Check it out....






5667ce7f99078110265cec8b75482e4ea7055780 check out this code ... Calviղ , Just а User has created this code...for your help. ... https://code.sololearn.com/WTcvJ7LRqwRj/?ref=app https://code.sololearn.com/WXj9RBI36Uwb/?ref=app


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?!! https://code.sololearn.com/WQ8Zj5RJiJ1q/?ref=app