HTML5 bezier curve animation

Question

I am a little bit of new in HTML5 area and I have a question to make. I am trying to create a drawing, like pencil, bezier curve in HTML5 canvas. While i have already created my curve i can't make it drawn itself when window is loaded. Any suggestions cause I've searched all web for this.

Thanks

Possible duplicate of [Drawing part of a Bézier curve by reusing a basic Bézier-curve-function?](https://stackoverflow.com/questions/878862/drawing-part-of-a-b%c3%a9zier-curve-by-reusing-a-basic-b%c3%a9zier-curve-function) — j08691, Feb 12 '18 at 16:52

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

To clarify: you want to animate the drawing of a bezier curve, so that it looks like it is being drawn on the screen?

If so, please see this answer. This shows you how to draw a part of a bezier curve.

What you want to do is draw part of the curve repeatedly (say once every 50 milliseconds, or whatever interval you choose). Each time you draw it, though, you draw a bigger portion of the curve, until you have drawn the entire thing.

edited May 23 '17 at 10:32

Community

1
1

answered Feb 21 '13 at 14:32

bwroga

5,379
2
23
25

That's exactly what I want to do. Thanks for your answer, really helped! – Antegeia Feb 22 '13 at 08:20

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

On window.onload event draw your bezier curve on canvas.

window.onload=function()
{
  // here your your code
}

for more help check this check this ans

using bezier curves

edited May 23 '17 at 10:24

Community

1
1

answered Feb 21 '13 at 18:08

Scarecrow

4,057
3
30
56

HTML5 bezier curve animation

2 Answers2