Canvas and Class

by karlovac

HTML

<canvas></canvas>

JavaScript

class Animations{
   constructor(){
     let canvas    = document.querySelector('canvas');
     canvas.width  = window.innerWidth;
     canvas.height = window.innerHeight;
     this.c = canvas.getContext('2d');

   }

    //Background animation
    backgroundAnimation(x,y,height,width){
        this._x       = x;
        this._y       = y;
        this._height  = height;
        this._width   = width;

        this.c.beginPath();
        this.c.rect(this._x,this._y,this._width,this._height);
        this.c.fillStyle = 'blue';
        this.c.fill();
        this.c.stroke();
    }
}

window.addEventListener("load", ()=>{
    const animations = new Animations();

    for(let i=0;i<10;i++){
        let x = Math.floor(Math.random()*100+50);
        let y = Math.floor(Math.random()*100+50);
        animations.backgroundAnimation(x,y,20,20);
}});