Untitled

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function create()
{

ctx.clearRect(0,0,canvas.width,canvas.height)

let a1 = document.getElementById("a1").value;
let a2 = document.getElementById("a2").value;
let a3 = document.getElementById("a5").value;
let a4 = document.getElementById("a4").value;
let a5 = document.getElementById("a5").value; ///x
let a6 = document.getElementById("a6").value; ///y

let mid = canvas.width/2;
ctx.strokeRect(mid-50,mid-50,100,100);


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px" style="border:1px solid black;"></canvas>
    <br>
    <input type="text" style="width:20px;" id="a1" value="1">
    <input type="text" style="width:20px;" id="a2" value="2">
    <input type="text" style="width:20px;" id="a5" value="3"><br/><br>
    <input type="text" style="width:20px;" id="a3" value="1">
    <input type="text" style="width:20px;" id="a4" value="2">
    <input type="text" style="width:20px;" id="a6" value="3"><br/><br>
    <input type="button" value="Create!" onclick="create()">

    <script src="script.js"></script>
</body>
</html>