Javascript Canvas - 서클의 색이 바뀌고 있습니다.

Question

캔버스에서 원을 그리는 데 문제가 있습니다. 내 캔버스에 원을 그리면 잘 작동하지만 이후에 사각형을 그릴 경우 내 원의 색이 사각형과 같은 색으로 바뀝니다.

이것은 지금 당황 스럽습니다.

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

당신은 원과 사각형을 (형태를 전환 상단에있는 체크 박스를 주) 그릴 수있는이 캔버스에 : 여기에 대해 이야기하고있는 것을 입증하는 jsbin 프로젝트입니다.

나는 함수의 인자가 아닌 설정 값으로 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