Javascript Canvas - 円が色を変更しています

Question

キャンバスに円を描くことに問題があります。キャンバスに円を描くとうまくいきますが、後で四角形を描くと、円の色が四角形と同じ色に変わります。

これはしばらく私を悩ませています。ここで私が何を言っているかを実証するjsbinプロジェクトです：

https://jsbin.com/bajezudayi/edit?html,js,output 

このキャンバスにあなたが（図形を切り替えるには上部にあるチェックボックスに注意してください）丸と四角を描くことができます。

私は関数の引数ではなく、drawCircleの色変数を設定値に変更しようとしましたが、問題は解決しません。

function drawCircle(x,y,rad,col,ctx){ 
    // This function draws a circle on a canvas 
    ctx.save(); 
    ctx.translate(x,y); 
    ctx.beginPath(); 
    ctx.arc(0,0,rad,0,2*Math.PI,false); 
    ctx.fillStyle='red'; // rather than =col 
    ctx.fill(); 
    ctx.restore(); 
} 

私は私のキャンバスにアニメーションループを適用する場合は、さえ奇妙な効果があるため、この問題の起こり始めます。

これは何が起こっているのですか？ ありがとうございます。

編集：

http://adam-day-com.stackstaging.com/orbital/index.html

は「ショーベクトルフィールド」ボックスをチェックしてみて、いくつかの惑星を追加します。 は、ここで私が現在働いている完全なプロジェクトです。ベクトルフィールドを描画する関数（アニメーションループで呼び出される）は、一連の薄いボックスを描画し、円の色をぼやけます。

Answer 1

私はctx.beginPath()とctx.closePath()を追加しました。これはあなたが望んだものですか？ https://jsbin.com/ribiyodoru/edit?html,js,output