Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
      var canvas = document.getElementById('canvasId');
      var context = canvas.getContext("2d");
      context.fillStyle = "green";
      var sizeX = 50;
      var sizeY = 0;
      for(var i = 0; i < 5; i++) {
        context.fillRect(0+(10+sizeX)*i, sizeY, sizeX, sizeX);
        console.log(sizeY);
        sizeX = sizeX + 10;

      }

      var oX = 50;
      var oY = 50;
      var posX = 50;
      for (var i = 0; i < 5; i++) {
        context.fillRect(canvas.width-posX, canvas.height-oY, oX, oX);
        oX = oX + 10;
        oY = oY + 10;
        posX = posX + oX + 10;
      }

      var radius = 0;
      var rY = 50;
      var posY = canvas.height/2;
      for (var i = 1; i <= 5; i++) {
        if(i%2 == 0){
          context.fillStyle = "red";
        } else {
          context.fillStyle = "white";
        }
        context.beginPath();
        context.arc(canvas.width/2, posY, rY, 0, Math.PI*2);
        context.fill();

        // 1 решение
        radius = rY - 4;
        posY = posY + radius + rY;
        rY = rY - 4;
        // 2 решение
        // rY = rY - 4;
        // posY = posY + 2*rY+4;

      }
    });
  </script>
  <style type="text/css">
  #canvasId{
    background: black;
  }
  </style>
</head>
<body>
  <canvas width="800" height="600" id="canvasId"></canvas>
</body>
</html>