title: Button does not react from the first click
body: <p>Greeting all,</p>
  <p>I have a problem with my button. I have created canvas function that creates a rectangular according coordinates after I click on button. However, when I open the html file, input coordinates and click on button it does not work from the first click. I should reload the page and after that the button starts working. Can you please let me know, why my button does not work from the first click? Please find my code attached.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let canvas = document.querySelector("#can")
  let ctx = canvas.getContext("2d")
  let rect1 = inp1.value
  let rect2 = inp2.value
  let arr1 = rect1.split("-")
  let arr2 = rect2.split("-")
  createcanvas.addEventListener("click" , ()=&gt;{
      
          ctx.rect(arr1[0], arr1[1], arr1[2], arr1[3]);
          ctx.rect(arr2[0], arr2[1], arr2[2], arr2[3]);
          ctx.stroke();
  })
  connect.addEventListener("click" , ()=&gt;{
      ctx.beginPath()
      ctx.moveTo(arr1[0],arr1[1])
      ctx.lineTo(arr2[0],arr2[0])
      ctx.stroke()
      ctx.closePath()
  
      ctx.beginPath()
      ctx.moveTo((+arr1[0])+(+arr1[2]),arr1[1])
      ctx.lineTo((+arr2[1])+(+arr2[2]),arr2[1])
      ctx.stroke()
      ctx.closePath()
  
      ctx.beginPath()
      ctx.moveTo(arr1[0], (+arr1[1])+(+arr1[2]))
      ctx.lineTo(arr2[0], (+arr2[1])+(+arr2[2]))
      ctx.stroke()
      ctx.closePath()
      ctx.beginPath()
      ctx.moveTo((+arr1[0])+(+arr1[2]),(+arr1[0])+(+arr1[2]))
      ctx.lineTo((+arr2[1])+(+arr2[2]),(+arr2[1])+(+arr2[2]))
      ctx.stroke()
      ctx.closePath()
      ctx.stroke()
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" name="" id="inp1"&gt;
      &lt;input type="text" name="" id="inp2"&gt;
      &lt;button id="createcanvas"&gt;Create&lt;/button&gt;
      &lt;button id="connect"&gt;Connect&lt;/button&gt;
      &lt;canvas id="can" width="500px" height="500px" style="background-color: olive;display:block;"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>