<canvas width="600" height="400"></canvas>
<script>
const canvas = document.querySelector('canvas')
const ctxt = canvas.getContext('2d')
function dibujarCirculo(x, y, r, color) {
ctxt.fillStyle = color
ctxt.beginPath()
ctxt.arc(x, y, r, 0, 2 * Math.PI)
ctxt.fill()
}
ctxt.fillStyle = "lightgrey"
ctxt.fillRect(0, 0, 600, 400)
dibujarCirculo(300, 200, 10, "red")
dibujarCirculo(300, 180, 10, "yellow")
dibujarCirculo(320, 200, 10, "black")
dibujarCirculo(300, 220, 10, "blue")
dibujarCirculo(280, 200, 10, "orange")
</script>