Hello everybody!

I just started learning myself canavas. Since I have not so much experience with Javascript this is not so easy for me.

What I have:
about 40 Circles, drawn with ctx.arc

What I want:
To click on those circles to have a different reaction.

My code (which is not working ):
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');


BigCircle = function(ctx, x, y, color, circleSize) {
ctx.shadowBlur = 10;
ctx.shadowColor = color;
ctx.beginPath();
ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
this.clicked = function() {
ctx.fillStyle = '#ff0000'
ctx.fill();
}
clickCircle(x,y,circleSize);
};

function clickCircle(x, y, circleSize) {
$('#canvas').click(function(e) {
var mouseCoordinateX = e.clientX, mouseCoordinateY = e.clientY
if (Math.pow(mouseCoordinateX - 50, 2) + Math.pow(mouseCoordinateY - 50, 2) < Math.pow(50, 2))
bigGreen.clicked()
})
alert("test");
};

var bigYellow = new BigCircle(ctx, 1650, 250, '#F5C942', 180);
var bigGreen = new BigCircle(ctx, 1580, 800, '#5eb62b', 180);
var bigOrange = new BigCircle(ctx, 300, 300, '#ffac40', 130);
var bigPink = new BigCircle(ctx, 250, 800, '#CD4E82', 210);
var bigBlue = new BigCircle(ctx, 900, 600, '#1C72AA', 450);