Is there any way for me to make the yellow stroke line move with the circle?

Question

I've recently started animating things in Js and I'm not sure what to do next. I'm trying to get an orange circle with a yellow outline to contract and expand but the yellow part is stationary. Here's my code and a link to my codepen. https://codepen.io/OriginalName/pen/OzKWbd?editors=0010
````
var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//declare global angle variable to be used later
var angle = 0;

var requestAnime = window.requestAnimationFrame;

function Circle() {
var radius = 25 + 150 * Math.abs(Math.cos(angle));

//draw a circle
c.beginPath();
c.arc(500, 300, radius, 0, Math.PI * 2, false);
c.fillStyle = "orange";
c.fill();

//outline
c.strokeStyle = "yellow";
c.stroke();
c.closePath();

angle += Math.PI / 64;

requestAnime(Circle);
}
var circle = new Circle();
````

Answer 1

You're not clearing the canvas in every animation frame.
Add this below radius update:

c.clearRect(0,0,canvas.width,canvas.height);

Answer 2

@Jonathan Piarra Thanks for the help!