Javascript画布-圆圈正在改变颜色

Question

我在画布上画圆时遇到问题。 当我在画布上绘制一个圆时，它可以正常工作，但是如果之后再绘制一个正方形，则我的圆的颜色将更改为与正方形相同的颜色。

这已经困扰了我一段时间了。 这是一个jsbin项目，用来演示我在说什么：

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

在此画布上，您可以绘制圆形和正方形（请注意顶部的复选框以切换形状）。

我尝试将drawCircle中的color变量更改为一个设置值，而不是将其作为函数参数，但是问题仍然存在。

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，输出