JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=myCanvas style="width:200px; height:200px; border:2px solid #f00"></canvas>
<div>
    <input type="text" id="souradnice1"> <br>
    <input type="text" id="souradnice2"> <br>
    <button onclick="draw()">Generuj</button> <br>
  </div>
<script>
  function getMousePos(event) 
{ 
   return {
    x: event.offsetX,
    y: event.offsetY
  };
}

var canvas = document.getElementById('myCanvas');
var kontext = canvas.getContext('2d');

function draw()
{
  var souradnice1 = Number(document.getElementById("souradnice1").value);
  var souradnice2 = Number(document.getElementById("souradnice2").value);

canvas.addEventListener('click', function(event) 
  {
  console.log(document.getElementById("souradnice1").value);
  console.log(document.getElementById("souradnice2").value);
  let mousePos = getMousePos(event);
  kontext.strokeStyle = "red";
  kontext.beginPath();
  kontext.moveTo(mousePos.x,mousePos.y);
  kontext.lineTo(mousePos.x+souradnice1,mousePos.y+souradnice2);
  kontext.closePath();
  kontext.stroke(); 
  },false);
}
</script>