JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>22 хода</title>
<script>
  window.onload = function() {
 var canvas = document.getElementById('game'),
    g = canvas.getContext('2d');
    g.fillStyle = '#000000'; 
                       for (var x = 0.5; x < 400; x += 50) {
            g.stroke();
      g.beginPath();
      g.moveTo(x, 0);
      g.lineTo(x, 350);           
       }
             for (var y = 0.5; y < 400; y += 50) {
    g.moveTo(0, y);
    g.lineTo(350, y);
     g.stroke();
    g.beginPath();
        }
                
            // Рисуем светлые фишки
         for (var x = 0.5; x < 350; x += 50) {
          g.fillStyle = 'red';
          g.beginPath();
          g.arc(25+x,175,20, 0, Math.PI*2, false);
          g.fill();  
           }    
        // Рисуем зеленые фишки
                      for (var y = 0.5; y < 350; y += 50) {
          g.fillStyle = 'green';
          g.beginPath();
          g.arc(175,25+y,20, 0, Math.PI*2, false);
          g.fill(); 
} 
          // Рисуем чёрную фишку
          g.fillStyle = 'black';
          g.beginPath();
          g.arc(175,175,20, 0, Math.PI*2, false);
          g.fill(); 

      }
 </script>
</head>
<body>
<canvas id="game" width="375" height="375">
</canvas>
</body>
</html>