How can I draw a loop while using the <canvas> tag

Question

I'm trying to make it so that in the middle of the canvas, I have three circles in a column, but I'm having trouble making a loop for it. (Note: I don't want to code three separate arcs, only a loop). Any help would be greatly appreciated.

<canvas id="menu" width="38%" height="38%" style="border: 1px solid black"> </canvas>

<script>
   var contents = document.getElementById("menu");
   var ctx = contents.getContext("2d");
   ctx.fillStyle = "#FFF0F5";  //sets the fill color
   ctx.fillRect(0, 0, 38, 38);  //draws the rectangle
   ctx.fillStyle = "#00FFFF";
   for(var i = 25; i < 100; i = i + 20) {
    ctx.beginPath();
    ctx.arc(20, i, 2, 0, 2*Math.PI);
    ctx.stroke();
   }
   </script>

Answer 1

I think your arcs were being drawn outside of your canvas.

This script draws three circles in a column:

var contents = document.getElementById("menu");
var ctx = contents.getContext("2d");
ctx.fillStyle = "#FFF0F5";  //sets the fill color
ctx.fillRect(0, 0, 38, 38);  //draws the rectangle
ctx.fillStyle = "#00FFFF";
for(var i = 1; i < 4; i++) {
  ctx.beginPath();
  ctx.arc(19, i * 10, 2, 0, 2*Math.PI);
  ctx.stroke();
}