JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="main.js" type="text/javascript"></script>
    <link type="text/css" href="main.css" rel="stylesheet">
</head>
<body>
<div id="all">
<div class='aaa'>
    <div class='bbb'>
    <p id="points"><span id = "pkt"></span> pkt!</p>
</div>
    <button id="btn" onclick="randomshot()"><img src="https://cdn2.iconfinder.com/data/icons/inverticons-stroke-vol-4/32/target_weapon_shoot-512.png" width="50" height="50" alt=""></button>
    <button onclick="shootnow()">Shoot now</button>
</div>
    <div id="poziomo"><div class="move" id="poz"></div></div>
    <div id="pionowo"><div class="move" id="pion"></div></div>
<canvas id="mycanvas" width="800" height="550" style='background-color: lightgreen;'></canvas>
<button onclick="refresh()">reset</button>
<div class="sum">
<div><p>Suma punktów: <span id="suma"></span></p></div>
<div><p>Ilość strzałów: <span id="multiply"></span></p></div>
<div><p>Celność: <span id="celnosc"></span></p></div>
</div>
    </div>
</body>

CSS

.bbb{
    margin-left: 200px;
    margin-top: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255,0,0,0.5);
    height: 50px;
    width: 400px;
    font-size:36px;
    z-index: 222;
}
.aaa {
    display: inline-block;
    margin-top: -50px
}

#points{
    text-align: center;
    padding-top: 100px;
}
#mycanvas {
    z-index: 1;
}
.sum {
    margin-left: 800px;
    margin-top:-150px;
}
.strzaly {
    margin-left: 800px;
    margin-top:-50px;
}
span {
    text-align:center;
}

#btn {
    margin-top: -40px;
}
#all {
    width: 960px;
}
#poziomo {
    height: 10px;
    position: absolute;
    width: 800px;
    background-color: RGBa(255,0,0,0.2);
    margin-left: 0;
    margin-top: 550px;
}
#pionowo {
    height: 550px;
    position: absolute;
    width: 10px;
    background-color: RGBa(255,0,0,0.2);
    margin-left: 800px;
}
.move {
    width: 10px;
    height: 10px;
    background-color: black;
}

JavaScript

var context = null;
var canvas = null;
var x = 0;
var y = 0;
var centerx = 0;
var centery = 0;
var sumapkt = 0;
var times = 0;
var shoots = 0;
var isclicked = false;


function letsgo(){
    canvas = document.getElementById("mycanvas");
    context = canvas.getContext("2d");
    canvas.onclick = function clicked(e) {draw(e); show();};
    static();
}
function draw(e){
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    shoot();
}
function shoot(){
    $("#points").fadeOut(0).stop();
    context.beginPath();
    context.arc(x, y, 2, 0, 2 * Math.PI);
    context.closePath();
    context.fill();
    times += 1;
}

function static()
{
    centerx = 400 - canvas.offsetLeft;
    centery = 350 - canvas.offsetTop;
    context.beginPath();
    context.arc(centerx, centery, 250, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();

    context.beginPath();
    context.arc(centerx, centery, 200, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();

    context.beginPath();
    context.arc(centerx, centery, 150, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();

    context.beginPath();
    context.arc(centerx, centery, 100, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();

    context.beginPath();
    context.arc(centerx, centery, 50, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();
}

function calculate(){
    var pkt = $("#pkt");
    var c = (x-centerx)*(x-centerx) + (y-centery)*(y-centery);
    var odleglosc = Math.sqrt(c);
    if (odleglosc <50){
        pkt.text("10");
        shoots += 1
    }
    else if (odleglosc <100){
        pkt.text("8");
        shoots += 1
    }
    else if (odleglosc <150){
        pkt.text("6");
        shoots += 1
    }
    else if (odleglosc <200){
        pkt.text("4");
        shoots += 1
    }
    else if (odleglosc <250){
        pkt.text("2");
        shoots += 1
    }
    else {pkt.text("0")}
    sumapkt = parseInt(sumapkt) +...