Why my for loop is not drawing multiple repeated shapes in the html canvas sketch?

Question

<html>
<body>
    <canvas width = "1200" height = "1200"> </canvas>


    <script>

        let canvas = document.querySelector('canvas');
        let context = canvas.getContext('2d');


        context.fillStyle = '#5bd75b';
        context.fillRect(0, 0, 1200, 1200);

        let radius = 500;
        for (let i = 1; i <= 10; i++)
        {
          if (Math.random() >= 0.5)
          {
            context.fillStyle = 'yellow';
          }
          else
          {
            context.fillStyle = 'red';
          }
          context.arc(600, 600, radius / i, 0, Math.PI * 2);
          context.fill(); 
         }


    </script>
</body>
</html>

I'm trying to draw multiple circles which will get smaller as the loop runs, but all I get is one big circle, can you please find what's wrong with my code or logic? I'm tired of trying things and finding a solution because my loop's format seems to be right.

See [Why does the Canvas API fill parts of these paths within a loop with the wrong color?](/a/69730036/4642212). `fill` fills paths, `arc` creates subpaths of the same path. You need `beginPath`. — Sebastian Simon, Nov 11 '21 at 17:04

score 0 · Accepted Answer · answered Nov 11 '21 at 16:36

0

When using canvas path functions you need to specify when a path begins and when it ends.
If not done so, all context.arc calls will be merged together into one big path which will be filled every time with the last given color.

Heres the solution to your problem:

context.beginPath();
context.arc(600, 600, radius / i, 0, Math.PI * 2);
context.fill();
context.closePath();

answered Nov 11 '21 at 16:36

WolverinDEV

1,494
9
19

`context.closePath();` is superfluous. It only connects the current subpath to its starting point. An `arc` with raidus `Math.PI * 2` is already closed. – Sebastian Simon Nov 11 '21 at 17:06

Why my for loop is not drawing multiple repeated shapes in the html canvas sketch?

1 Answers1