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('c');
     context = canvas.getContext('2d');

      for (var x = 0.5; x < 500; x += 10) {
      context.strokeStyle = '#eee' ;
      context.stroke();
      context.beginPath();
      context.moveTo(x, 0);
      context.lineTo(x, 375);
                   
       }

for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
context.strokeStyle = '#eee' ;
 context.stroke();
 context.beginPath();
}

context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);



context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);


context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
context.strokeStyle = "#000";
context.stroke();

context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);

context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);
    context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

    

      }
 </script>
</head>
<body>

<canvas id="c" width="500" height="375">
</canvas>
</body>
</html>