canvasで円の軌跡を消したいです。

canvasでrequestAnimationFrame()と.clearRect()を使い図形をアニメーションさせています。下のコードでは四角はうまくアニメーションされるのですが、何故か
円の軌跡だけ残ってしまいます。
どうしたら四角のように円の軌跡を消すことができるでしょうか？
また四角を描画するときのfillRect()のようにfillArc()のようにして一行で円を描くことはできませんか？
回答よろしくお願いします！

HTML
1<html>
2    <canvas id = "test">
3    </canvas>
4
5    <script>
6        var canvas = document.getElementById("test")
7        var context = canvas.getContext("2d")
8
9        canvas.width = 1000
10        canvas.height = 500
11        var speed = 0
12
13        function animation(){
14            context.clearRect(0,0,1000,500)
15            speed++
16            context.arc(100, 50+speed, 30, 0, 2 * Math.PI); // (100, 50)の位置に半径30pxの円
17            context.fill()
18            context.fillRect(0,speed,30,30)
19            requestAnimationFrame(animation)
20        }
21        animation()
22    </script>
23
24</html>

行動規範の内容に同意します

回答2件

context.arc() はパスに円弧を加える命令です。呼ばれるたびに円弧が増えます。

パスを空にするためには、context.arc() の前に context.beginPath() しておくとよいでしょう。

投稿2021/09/14 09:59

int32_t

総合スコア20882

自己解決

無事解決しました。
context.beginPath();を追加してパスをリセットしてないため軌跡が残ってたようです。

HTML
1<html>
2    <canvas id = "test">
3    </canvas>
4
5    <script>
6        var canvas = document.getElementById("test")
7        var context = canvas.getContext("2d")
8
9        canvas.width = 1000
10        canvas.height = 500
11        var y = 0
12
13        function animation(){
14            context.clearRect(0,0,1000,500)
15            context.beginPath();
16            context.arc(100, y, 30, 0, 2 * Math.PI); // (100, 50)の位置に半径30pxの円
17            context.fill()
18            context.fillRect(0,y,30,30)
19            y++
20            requestAnimationFrame(animation)
21        }
22        animation()
23    </script>
24
25</html>