Siento que no queda al centro con los valores en (x,y) que nos dan de referencia asi que los movi un poco, si no se ven centrados, les agradeceria si me lo hacen saber, gracias!
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
function dibujarCirculo(x, y, radio, color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*3.14);
pincel.fill();
}
dibujarCirculo(260,200,20,"red");
dibujarCirculo(220,200,20,"orange");
dibujarCirculo(260,240,20,"blue");
dibujarCirculo(300,200,20,"black");
dibujarCirculo(260,160,20,"yellow");
</script>