function refBalls(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var circles = [{x:40,y:100,r:20,color:'black',vx:5,vy:10}]
function draw(){
ctx.beginPath();
ctx.arc(circles[0].x, circles[0].y, circles[0].r, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
if( (circles[0].x + circles[0].r + circles[0].vx > c.width + c.style.left) || (circles[0].x - circles[0].r + circles[0].vx < c.style.left) ){
circles[0].vx = -circles[0].vx;
}
circles[0].x += circles[0].vx;
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);}
I am noticing an issue where the ball is not moving smoothly on the canvas. It seems to be leaving a trail behind it instead of appearing as a solid continuous movement. Any suggestions or solutions would be greatly appreciated! Here is a screenshot of what I'm currently seeing in my browser