canvasでアニメーションの実行順を指定する方法

canvasアニメーションで四角を描きたいです。
①右上から左上へのライン描画
②左上から左下へのライン描画
③左下から右下へのライン描画
④右下から右上へのライン描画

上記の順で四角になるようなcanvasアニメーションを作成したいです。

現在、①と②の動作までは実装出来たのですが、
①と②が同時に処理されてしまい、一筆書きのようになりません。
canvasのアニメーションを順番に制御する方法はないのでしょうか？

以下コードになります。

javascript
1$(function(){
2    function drawMoveBox(){
3        var canvas = document.getElementById('moveBoxR');
4        var ctx = canvas.getContext('2d');
5        ctx.lineWidth = 3;
6        ctx.strokeStyle = 'red';
7
8        var beginPos = 0;
9        var movePos = beginPos;
10        var endPos = canvas.width - 2;
11
12        var beginPosRB = 0;
13        var movePosRB = beginPosRB;
14        var endPosRB = canvas.height - 2;
15
16        var addVal = 2;
17        var isAnimRT   = function(){
18            return (movePos < endPos);
19        };
20        var isAnimRB   = function(){
21            return (movePosRB < endPosRB);
22        };
23        function draw(){
24            ctx.beginPath();
25            ctx.moveTo(beginPos, 0);
26            ctx.lineTo(movePos, 0);
27            ctx.closePath();
28            ctx.stroke();
29
30            if (isAnimRT() === true) {
31                movePos += addVal;
32                movePos = (isAnimRT() === false) ? endPos : movePos;
33                requestAnimationFrame(draw)
34            }
35        };
36        draw();
37
38        function drawRB(){
39            ctx.beginPath();
40            ctx.moveTo(100, beginPosRB);
41            ctx.lineTo(100, movePosRB);
42            ctx.closePath();
43            ctx.stroke();
44            if (isAnimRB() === true) {
45                movePosRB += addVal;
46                movePosRB = (isAnimRB() === false) ? endPosRB : movePosRB;
47                requestAnimationFrame(drawRB)
48            }
49        };
50        drawRB();
51
52    };
53    drawMoveBox();
54});

①～④が一筆書きのような動作になるのであれば処理を分けなくとも構いません。
canvasを初めて扱うため回りくどい書き方をしているかもしれません。
どなたかご教授お願い致します。

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

回答1件

ベストアンサー

こういう事でいいのでは。
isAnimRT()とかisAnimRB()があったので、それ使えるかなと。
「isAnimRT() === true」のなかに「isAnimRB() === false」があったので、ちょっとシンプルにしておきました。
向きとか位置はあわせてください。

js
1		function draw(){
2			ctx.beginPath();
3			ctx.moveTo(beginPos, 0);
4			ctx.lineTo(movePos, 0);
5			ctx.closePath();
6			ctx.stroke();
7
8			movePos += addVal;
9			if(isAnimRT() === false){
10				//端まで行ったとき
11				movePos = endPos;
12				drawRB();
13			}else{
14				//アニメーション中
15				movePos = movePos;
16				requestAnimationFrame(draw);
17			}
18		};
19		draw();
20
21		function drawRB(){
22			ctx.beginPath();
23			ctx.moveTo(100, beginPosRB);
24			ctx.lineTo(100, movePosRB);
25			ctx.closePath();
26			ctx.stroke();
27      
28			movePosRB += addVal;
29			if (isAnimRB() === false) {
30				//端まで行ったとき
31				movePosRB = endPosRB;
32			}else{
33				//アニメーション中
34				movePosRB = movePosRB;
35				requestAnimationFrame(drawRB);
36			}
37		};
38