+ 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
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 https://code.sololearn.com/WCy4z3JGlcmu/?ref=app
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 https://code.sololearn.com/WCbORDDI0sis/?ref=app
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: https://code.sololearn.com/W5d3CeN9n8ee/?ref=app
8th Nov 2018, 9:22 PM
Rowsej
Rowsej - avatar
+ 34
https://code.sololearn.com/WFym3ebOYARa/?ref=app https://code.sololearn.com/W3R57lIN7waZ/?ref=app
10th Nov 2018, 4:59 AM
Amadeus
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 https://code.sololearn.com/WxJlEOqLV5IL/?ref=app
9th Nov 2018, 6:22 PM
Morpheus
Morpheus - avatar
+ 18
https://code.sololearn.com/WgENW3KvMA1F/?ref=app https://code.sololearn.com/WhiNb9BkJUVC/?ref=app
9th Nov 2018, 11:01 PM
Ulisses Cruz
Ulisses Cruz - avatar
+ 17
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 ^^
9th Nov 2018, 3:56 PM
Nikhil
Nikhil - avatar
9th Nov 2018, 7:19 PM
Serhat İbin
Serhat İbin - avatar
+ 15
https://code.sololearn.com/W6yCLMZjV5bh/?ref=app
9th Nov 2018, 5:13 PM
Florinn
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
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
Rowsej - avatar
9th Nov 2018, 5:16 PM
renamed
renamed - avatar
+ 7
5667ce7f99078110265cec8b75482e4ea7055780 I saw this Youtube video: SVG Line Animations with Enhanced Walkway JS https://www.youtube.com/watch?v=Tqevz4ZyT7E Check it out....
10th Nov 2018, 2:21 AM
Ikechukwu Okonkwo
Ikechukwu Okonkwo - avatar
+ 5
https://code.sololearn.com/WeXAL29HUfuT/?ref=app
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?!! https://code.sololearn.com/WQ8Zj5RJiJ1q/?ref=app
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
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
Vishal Kumar - avatar