Question

I am making a series of circles using the HTML5 canvas element. I am using a while loop to increment the size of the circles. I am attempting to increment them by three but I’m not sure of the correct syntax.

    var cirSize = 2;

    while (cirSize < 400)
      {
        ctx.beginPath();
        ctx.strokeStyle="#000000"; 
        ctx.arc(480,480,cirSize++,0,Math.PI*2,true);
        ctx.stroke();
        alert(cirSize)
      }

Thanks

Answer 1

cirSize++ will increment by one, so will ++cirSize. But there’s a difference. The former will return the value of cirSize first and then increment. While the latter will increment first and then return the value of cirSize

var cirSize = 2;

while (cirSize < 400)
  {
    ctx.beginPath();
    ctx.strokeStyle="#000000"; 
    ctx.arc(480,480,cirSize,0,Math.PI*2,true);
    ctx.stroke();
    cirSize += 3; // here's the change.
    alert(cirSize)
  }