JSFiddle - React, Tailwind, and code Playground

by Vadim Shaikhislamov

HTML

<div id="test"></div>
<canvas id="pole"></canvas>

JavaScript

var example = document.getElementById("pole");
var koef = 6;
ctx = example.getContext('2d');
example.width = 68*koef;
example.height = 105*koef;

function drawPole(w,h,k) {
    var ko = k||koef;
    var radiusPole = 9.15*ko;
    var gatesWidth = 7.44*ko;
    var penaltySquare = 16.5*ko;
    var keeperSquare = 5.5*ko;
    var penalty = 11*ko;
    var cPole = "green";
    var cStroke = "white";
    var lWidth = 2;
    
    //рисуем основное поле
    ctx.fillStyle = cPole;
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = cStroke;
    ctx.lineWidth = lWidth;
    ctx.strokeRect(0, 0, w, h);
    
    //рисуем центральный круг и круги у штрафных площадок      
    ctx.beginPath();
        ctx.arc(w/2, h/2, radiusPole, 0, 2*Math.PI,true);
        ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
        ctx.arc(w/2, penalty, radiusPole, 0, 2*Math.PI,true);
        ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
        ctx.arc(w/2, h-penalty, radiusPole, 0, 2*Math.PI,true);
        ctx.stroke();
    ctx.closePath();
    
    //рисуем среднюю линию
    ctx.beginPath();  
        ctx.moveTo(0, h/2);
        ctx.lineTo(w, h/2); 
        ctx.stroke();
    ctx.closePath(); 

    //рисуем штрафную площадь
    ctx.fillRect(((w-gatesWidth)/2-penaltySquare),1,2*penaltySquare+gatesWidth,penaltySquare);
    ctx.strokeRect(((w-gatesWidth)/2-penaltySquare),0,2*penaltySquare+gatesWidth,penaltySquare);
    ctx.strokeRect(((w-gatesWidth)/2-keeperSquare),0,2*keeperSquare+gatesWidth,keeperSquare);
    ctx.fillRect(((w-gatesWidth)/2-penaltySquare),h-penaltySquare-1,2*penaltySquare+gatesWidth,penaltySquare);
    ctx.strokeRect(((w-gatesWidth)/2-penaltySquare),h-penaltySquare-1,2*penaltySquare+gatesWidth,penaltySquare);
    ctx.strokeRect(((w-gatesWidth)/2-keeperSquare),h-keeperSquare-1,2*keeperSquare+gatesWidth,keeperSquare);
};

function Player(n) {
    this.name = n;
    this.x = 20;
    this.y = 20;
    this.color = "blue";
    var speedX = 1, speedY = 1;
    this.update...