window.onload = function() { const canvas = document.getElementById("canvas"); canvas.width = window.innerWidth-20; canvas.height = 300; const ctx = canvas.getContext("2d"); function Square(posX, posY, x, y, ) { this.x = x; this.y = y; this.posX = posX; this.posY = posY; this.draw = function() { ctx.beginPath(); ctx.rect(this.posX, this.posY, this.x, this.y); ctx.strokeStyle = this.color; ctx.fillStyle = this.color; //ctx.fill(); ctx.stroke(); } this.update = function(){ var vel = 7 if(this.posX > canvas.width-20 + this.x || this.posX < 0){ var spd = -vel*33 this.posX += spd } if(this.posY > canvas.height-5 -this.y|| this.posY< 0){ var spd = -vel/2 //this.posY +=spd }else if((this.posX > canvas.width-20 + this.x || this.posX < 0) && (this.posY > canvas.height-5 -this.y|| this.posY< 0)){ var spd = -vel this.posX += speed this.posY += speed }else{ var spd = vel this.posX += spd*Math.random()/0.5 this.posY += spd } this.color = rainbow() this.draw() } } function Square2(posX2, posY2, x2, y2, ) { this.x2 = x2; this.y2 = y2; this.posX2 = posX2; this.posY2 = posY2; this.draw = function() { ctx.beginPath(); ctx.rect(this.posX2, this.posY2, this.x2, this.y2); ctx.strokeStyle = this.color2; ctx.fillStyle = this.color2; //ctx.fill(); ctx.stroke(); } this.update = function(){ var vel = 7 if(this.posX2 > canvas.width-20 + this.x || this.posX2 < 0){ var spd = -vel*33 this.posX2 += spd } if(this.posY2 > canvas.height-5 -this.y2|| this.posY2< 0){ var spd = -vel/2 //this.posY +=spd }else if((this.posX2 > canvas.width-20 + this.x2 || this.posX2 < 0) && (this.posY2 > canvas.height-5 -this.y2|| this.posY2< 0)){ var spd = -vel this.posX2 += speed this.posY2 += speed }else{ var spd = vel this.posX2 += spd*-Math.random()/0.5 this.posY2 += spd } this.color = rainbow() this.draw() } } function Square3(posX3, posY3, x3, y3, ) { this.x3 = x3; this.y3 = y3; this.posX3 = posX3; this.posY3 = posY3; this.draw = function() { ctx.beginPath(); ctx.rect(this.posX3, this.posY3, this.x3, this.y3); ctx.strokeStyle = this.color3; ctx.fillStyle = this.color3; //ctx.fill(); ctx.stroke(); } this.update = function(){ var vel = 7 if(this.posX3 > canvas.width-20 + this.x || this.posX3 < 0){ var spd = -vel*33 this.posX3 += spd } if(this.posY3 > canvas.height-5 -this.y3|| this.posY3< 0){ var spd = -vel/2 //this.posY +=spd }else if((this.posX3 > canvas.width-20 + this.x3 || this.posX3 < 0) && (this.posY3 > canvas.height-5 -this.y3|| this.posY3< 0)){ var spd = -vel this.posX3 += speed this.posY3 += speed }else{ var spd = vel this.posX3 += Math.floor(Math.random() * (5 - -5 + 1)) + -5; this.posY3 += spd*Math.random() } this.color = rainbow() this.draw() } } let squares = []; let squares2 = []; let squares3 = []; let posX = 0; let posY = 0; let posX2 = canvas.width; let posY2 = 0; let posX3 = canvas.width/2; let posY3 = 0; let x = 7; let y = 7; let x2 = 7; let y2 = 7; let x3 = 7; let y3 = 7; function animate(){ squares.push(new Square(posX, posY, x, y)); squares2.push(new Square2(posX2, posY2, x2, y2)); squares3.push(new Square3(posX3, posY3, x3, y3)) if(squares.length ==200){ squares.length -= 1 } if(squares2.length ==200){ squares2.length -= 1 } if(squares3.length ==200){ squares3.length -= 1 } requestAnimationFrame(animate) ctx.clearRect(0,0,innerWidth,innerHeight) for (let i = 0; i < squares.length; i++){ squares[i].update() } for (let i = 0; i < squares2.length; i++){ squares2[i].update() } for (let i = 0; i < squares3.length; i++){ squares3[i].update() } } animate() } const times = []; let fps; function refreshLoop() { window.requestAnimationFrame(() => { const now = performance.now(); while (times.length > 0 && times[0] <= now - 1000) { times.shift(); } times.push(now); fps = times.length; var fpsShow = document.getElementById("fpsshow"); fpsShow.innerText = "FPS: "+fps; refreshLoop(); }); } refreshLoop(); function rainbow() { let hexColors = 'ABCDEF0123456789' let rainbowMaker = '#' for (let i = 0; i < 6; i++) { rainbowMaker += hexColors[Math.floor(Math.random() * 16)] } return rainbowMaker }

Square Confetti Animation