How to add random shapes on click using canvas animation

For this animation On click I need a different shapes to be made I need 5 different shapes in total. Also Ive had a hard time doing these things,

add a random motion vector to every circle

add an interval timer that redraws the background and each circle in its new position every 30 milliseconds

Check if any circle is outside the canvas width and height, and if so reverse its direction back onto the screen

also maybe If I can have some random text to fade in and fade out every couple of seconds too

this is in my body

<canvas id='canvas' width=500 height=500></canvas>

this is my script

<script>
  var canvas;
  var context;
  var circles = [];
  var timer;
  function Circle(x, y, color) {
    this.x = x;
    this.y = y;
    this.dx = Math.random()*4-2;
    this.dy = Math.random()*4-2;
    this.color = color;
  }
  function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext("2d");

    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);
    resizeCanvas();
    canvas.onclick = function(event) {
        handleClick(event.clientX, event.clientY);
    };
    timer = setInterval(resizeCanvas, 20);
  }
  function handleClick(x, y) {
     var found = false;
     for (var i=0; i<circles.length; i++) {
        d = Math.sqrt((circles[i].x - x)*(circles[i].x - x) + (circles[i].y - y)*(circles[i].y - y));
        if (d <= 30) {
            circles.splice(i, 1);
            found = true;
        }
     }
     fillBackgroundColor();
     if (!found) {
        var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
        var color = colors[Math.floor(Math.random()*colors.length)];
        circles.push(new Circle(x, y, color));
    }
    for (var i=0; i<circles.length; i++) {
        drawCircle(circles[i]);
    }
  }
  function drawCircle(circle) {
     context.beginPath();
     context.arc(circle.x, circle.y, 30, 0, degreesToRadians(360), true);
     context.fillStyle = circle.color;
     context.fill();
     if (circle.x + circle.dx > canvas.width || circle.x + circle.dx < 0)
        circle.dx = -circle.dx;
     if (circle.y + circle.dy > canvas.height || circle.y + circle.dy < 0)
        circle.dy = -circle.dy;
     circle.x += circle.dx;
     circle.y += circle.dy;
  }
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    fillBackgroundColor();
    for (var i=0; i<circles.length; i++) {
        drawCircle(circles[i]);
     }
  }
  function fillBackgroundColor() {
     //var colors = ["white", "yellow", "blue", "red"];
     //var bgColor = colors[Math.floor(Math.random() * colors.length)];
     context.fillStyle = 'black';
     context.fillRect(0, 0, canvas.width, canvas.height);
}
function degreesToRadians(degrees) {
    //converts from degrees to radians and returns
    return (degrees * Math.PI)/180;
}
window.onload = init;