<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=.0.x, initial-scale=1.0">
    <title>Drawing different circles through loops</title>
</head>
<body>
    <canvas></canvas>
    <button>Update</button>
    </body>
</html>

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const WIDTH = document.documentElement.clientWidth;
const HEIGHT = document.documentElement.clientHeight;

canvas.width=WIDTH;
canvas.height=HEIGHT;

function random(num){
    return Math.floor(Math.random()*num);
}

function draw(){
    ctx.clearRect(0,0,WIDTH,HEIGHT);
    for(let i =0;i<100;i++){
        ctx.beginPath();
        ctx.fillStyle='rgba(255,0,0,0.5)';
        ctx.arc(random(WIDTH),random(HEIGHT),random(50),0,2*Math.PI);
        ctx.fill();

    }
}
btn.addEventListener('click',draw);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.