canvas.js

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

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

// c.fillStyle = "rgba(255, 0 ,0 , 0.5)"
// c.fillRect(100, 100, 100, 100)
// c.fillStyle = "rgba( 0, 255 ,0 , 0.5)"
// c.fillRect(400, 100, 100, 100)
// c.fillStyle = "rgba(0, 0 , 255, 0.5)"
// c.fillRect(300, 300, 100, 100)


// console.log(canvas)


// // line

// c.beginPath();
// c.moveTo(50, 300);
// c.lineTo(300, 100);
// c.lineTo(400, 300);
// c.strokeStyle = "#fa34a3";
// c.stroke();

// Arc / cistle

// c.beginPath();
// c.arc( 300, 300, 30, Math.PI *2   , false )
// c.strokeStyle = "black"
// c.stroke()


// for (var  i = 0; i < 100; i++) {
//     var x = Math.random() * window.innerWidth ;
//     var y = Math.random() * window.innerHeight ; 
//     c.beginPath();
//     c.arc( x, y, 30, Math.PI *2   , false )
//     c.strokeStyle = "black"
//     c.stroke()
    
// }




function Circle(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.draw = function () {
        //circulo
        c.beginPath();
        c.arc( this.x, this.y, this.radius, 0, Math.PI * 2   , false );
        c.strokeStyle = "yellow";
        c.stroke();
        c.fill();
        //quadrado
        c.fillStyle = this.color;
        c.fillRect(this.x + Math.random() *20  , this.y +  Math.random() *20  , 100, 100)
           
    }

    this.update = function () {

       if( this.x  +  this.radius > innerWidth || this.x - this.radius < 0 ){
            this.dx = -this.dx;
        }            
        if( this.y  +  this.radius > innerHeight || this.y - this.radius < 0 ){
            this.dy = -this.dy;
        }

        this.x += this.dx;
        this.y += this.dy;

    	this.draw();

    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


var circleArray = [];

for (let i = 0; i < 10; i++) {
   
    var radius = 30;
    var x = Math.random() * (innerWidth  - radius * 2 ) + radius;
    var y = Math.random() * (innerHeight - radius * 2 ) + radius;
    var dx = (Math.random() - 0.5) * 10; 
    var dy = (Math.random() - 0.5) * 10 ;             
    var color  = getRandomColor();    
    
    circleArray.push(new Circle(x, y, dx, dy, radius, color ));
    console.log(circleArray);
}

function animate () {
    requestAnimationFrame(animate);
    c.clearRect(0,0, innerWidth, innerHeight);

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

        circleArray[i].update();
        
    }
}

animate();