Hola, se que el ejercicio es para que sean todos del mismo color pero a mi se me hizo más divertido hacer que sean círculos de colores al azar :D
<meta charset = "UTF8">
<h1>Programa V.3</h1>
<br>
<br>
<br>
<canvas width = "600" height = "400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = " #eaecee ";
pincel.fillRect(0, 0, 600, 400);
function pedircirculo(evento){
console.log(evento);
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
dibujarcirculo(x,y);
}
function dibujarcirculo(x,y){
var posicion = Math.round(Math.random() * 10);
var color = [" #cd6479 "," #cd64aa "," #b964cd "," #8764cd ","#6497cd"," #64cdc2 ","#6ecd64"," #f1f174 ","#ea6161"," #ffffff "," #000000 "]
pincel.fillStyle = color[posicion];
pincel.beginPath();
pincel.arc(x,y,15,0,2*3.14);
pincel.fill();
}
pantalla.onclick = pedircirculo;
</script>