<canvas> etiketini kullanırken bir döngü nasıl çizebilirim

Question

Tuvalin ortasında, bir sütunda üç dairenin olmasını sağlamaya çalışıyorum ancak bunun için bir döngü oluştururken sorun yaşıyorum. (Not: Üç ayrı yayı, sadece bir döngüyü kodlamak istemiyorum). Herhangi bir yardım büyük takdir edilecektir.

<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

Bence yaylarınız tuvalinizin dışına çekiliyordu.

Bu komut dosyası, bir sütunda üç daireler çizer:

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(); 
}