I tried adding a rectangle to my code so that it would move around the canvas like the heart and the ball but my code does not run after adding the rectangle and I cannot figure out why.

// Initial Setup

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

canvas.width = innerWidth;

canvas.height = innerHeight;

// Variables

var mouse = {

x: innerWidth / 3,

y: innerHeight / 3

};

var colors = [

'LightBlue',

'DeepSkyBlue',

'royalBlue',

'MidnightBlue'

];

var gravity = 0.2;

var friction = 0.98;

// Event Listeners

addEventListener("mousemove", function(event) {

mouse.x = event.clientX;

mouse.y = event.clientY;

});

addEventListener("resize", function() {

canvas.width = innerWidth;

canvas.height = innerHeight;

init();

});

addEventListener("click", function(event) {

init();

});

// Utility Functions

function randomIntFromRange(min,max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

function randomColor(colors) {

return colors[Math.floor(Math.random() * colors.length)];

}

// Objects

function Ball(x, y, dx, dy, radius, color) {

this.x = x;

this.y = y;

this.dx = dx;

this.dy = dy;

this.radius = radius;

this.color = color;

this.update = function() {

if (this.y + this.radius + this.dy> canvas.height) {

this.dy = -this.dy;

this.dy = this.dy * friction;

this.dx = this.dx * friction;

} else {

this.dy += gravity;

}

if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {

this.dx = -this.dx * friction;

}

this.x += this.dx;

this.y += this.dy;

this.draw();

};

this.draw = function() {

c.beginPath();

c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

c.fillStyle = this.color;

c.fill();

c.stroke();

c.closePath();

};

}

function Heart(x, y, dx, dy, radius, color) {

this.x = x;

this.y = y;

this.dx = dx;

this.dy = dy;

this.radius = radius;

this.color = color;

this.update = function() {

if (this.y + this.radius + this.dy> canvas.height) {

this.dy = -this.dy;

this.dy = this.dy * friction;

this.dx = this.dx * friction;

} else {

this.dy += gravity;

}

if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {

this.dx = -this.dx * friction;

}

this.x += this.dx;

this.y += this.dy;

this.draw();

};

this.draw = function() {

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

ctx.fillStyle = this.color;

ctx.fill();

ctx.stroke();

ctx.closePath();

// Cubic curves example

ctx.beginPath();

ctx.moveTo(75+this.x, 40+this.y);

ctx.bezierCurveTo(75+this.x, 37+this.y, 70+this.x, 25+this.y, 50+this.x, 25+this.y);

ctx.bezierCurveTo(20+this.x, 25+this.y, 20+this.x, 62.5+this.y, 20+this.x, 62.5+this.y);

ctx.bezierCurveTo(20+this.x, 80+this.y, 40+this.x, 102+this.y, 75+this.x, 120+this.y);

ctx.bezierCurveTo(110+this.x, 102+this.y, 130+this.x, 80+this.y, 130+this.x, 62.5+this.y);

ctx.bezierCurveTo(130+this.x, 62.5+this.y, 130+this.x, 25+this.y, 100+this.x, 25+this.y);

ctx.bezierCurveTo(85+this.x, 25+this.y, 75+this.x, 37+this.y, 75+this.x, 40+this.y);

ctx.fill();

}

function Rect(x, y, dx, dy, radius, color) {

this.x = x;

this.y = y;

this.dx = dx;

this.dy = dy;

this.radius = radius;

this.color = color;

this.update = function() {

if (this.y + this.radius + this.dy> canvas.height) {

this.dy = -this.dy;

this.dy = this.dy * friction;

this.dx = this.dx * friction;

} else {

this.dy += gravity;

}

if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {

this.dx = -this.dx * friction;

}

this.x += this.dx;

this.y += this.dy;

this.draw();

};

this.draw = function() {

ctx.beginPath();

ctx.fillRect(this.x, this.y, this.radius, 0, Math.PI * 2, false);

ctx.fillStyle = this.color;

ctx.fill();

ctx.stroke();

ctx.closePath();

c.fillStyle = 'rgba(255, 0, 0, 0.5)';

c.fillRect(100, 100, 100, 100);

c.fillStyle = 'rgba(0, 0, 255, 0.5)';

c.fillRect(400, 100, 100, 100);

c.fillStyle = 'rgba(0, 255, 0, 0.5)';

c.fillRect(300, 300, 100, 100);

console.log(canvas);

}

// Implementation

var ballArray = [];

var heartArray = [];

var rectArray = [];

function init() {

ballArray = [];

for (let i = 0; i < 65; i++) {

var radius = randomIntFromRange(8, 20);

var x = randomIntFromRange(radius, canvas.width - radius);

var y = randomIntFromRange(0, canvas.height - radius);

var dx = randomIntFromRange(-2, 3)

var dy = randomIntFromRange(-2, 2)

ballArray.push(new Ball(x, y, dx, dy, radius, randomColor(colors)));

}

heartArray = [];

for (let i = 0; i < 65; i++) {

var radius = randomIntFromRange(8, 20);

var x = randomIntFromRange(radius, canvas.width - radius);

var y = randomIntFromRange(0, canvas.height - radius);

var dx = randomIntFromRange(-3, 3)

var dy = randomIntFromRange(-2, 2)

heartArray.push(new Heart(x, y, dx, dy, radius, randomColor(colors)));

}

rectArray = [];

for (let i = 0; i < 65; i++) {

var radius = randomIntFromRange(8, 20);

var x = randomIntFromRange(radius, canvas.width - radius);

var y = randomIntFromRange(0, canvas.height - radius);

var dx = randomIntFromRange(-3, 3)

var dy = randomIntFromRange(-2, 2)

rectArray.push(new Rect(x, y, dx, dy, radius, randomColor(colors)));

}

// Animation Loop

function animate() {

requestAnimationFrame(animate);

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

for (let i = 0; i < ballArray.length; i++) {

ballArray[i].update();

}

}

function animate() {

requestAnimationFrame(animate);

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

for (let i = 0; i < heartArray.length; i++) {

heartArray[i].update();

}

}

function animate() {

requestAnimationFrame(animate);

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

for (let i = 0; i < rectArray.length; i++) {

rectArray[i].update();

}

}

init();

animate();