+86

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

31 Answers

New Answer

+6

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

+70

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

+52

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

+39

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

+33

I think using canvas is actually better than svg, because it's less laggy: https://code.sololearn.com/WFym3ebOYARa/?ref=app https://code.sololearn.com/W3R57lIN7waZ/?ref=app

+18

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

+18

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

+16

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.

+12

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

+11

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

+9

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

+9

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 ^^

+8

https://code.sololearn.com/W6yCLMZjV5bh/?ref=app

+8

Look this: https://code.sololearn.com/WT8fn1jI2jIG/?ref=app

+7

Only typing😅 https://code.sololearn.com/WXj9RBI36Uwb/?ref=app

+6

https://code.sololearn.com/WTcvJ7LRqwRj/?ref=app

+6

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

+5

https://code.sololearn.com/WeXAL29HUfuT/?ref=app

+5

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

+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