My code below is for Chris Courses "Circular Motion" tutorial, but I can't figure out why my clearRect isn't working. It's got to be something I'm just not seeing, I have two other canvas animations working now, but this one wont clear the rect and it's driving me nuts....
Thanks for anyone who has the time to help!
function spirals() {
const canvas2 = document.getElementById('mycanvas');
canvas2.width = document.getElementById('mycanvas').scrollWidth;
canvas2.height = document.getElementById('mycanvas').scrollHeight;
const c2 = canvas2.getContext('2d');
const spiralColorArray = [
'#ff0000',
'#00ff00',
'#0000ff'
];
addEventListener('resize', () => {
canvas2.width = document.getElementById('mycanvas').scrollWidth;
canvas2.height = document.getElementById('mycanvas').scrollHeight;
init();
});
function SpinnerIcon(h, v, radius, color) {
this.h = h;
this.v = v;
this.color = color;
this.radius = radius;
this.update = () => {
this.h += 1;
this.draw();
};
this.draw = () => {
c2.beginPath;
c2.arc(this.h, this.v, this.radius, 0, Math.PI*2, false);
c2.fillStyle = this.color;
c2.fill();
c2.closePath();
}
}
function init() {
spinnerArray = [];
for(let i=0; i < 1; i++) {
spinnerArray.push(new SpinnerIcon(canvas2.width/2, canvas2.height/2, 5, 'red'))
}
}
let spinnerArray;
function animate() {
requestAnimationFrame(animate);
c2.clearRect(0, 0, canvas2.width, canvas2.height);
spinnerArray.forEach(parti => {
parti.update();
})
}
init();
animate();
}
spirals();#mycanvas {
background: blue;
}<canvas id="mycanvas" width="500" height="500">
