title: draw rectangle on canvas between 2 points
body: <p>I'm new to javascript and trying to learn how to draw on a canvas. The task is to draw a rectangle between 2 clicked points on a canvas.</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 rectangle = 0;
  
  window.addEventListener("load", () =&gt; {
    const canvas = document.getElementById("myCanvas");
    const context = canvas.getContext("2d");
    let x;
    let y;
    canvas.addEventListener("click", (e) =&gt; {
      if (rectangle === 0) {
        x = e.clientX;
        y = e.clientY;
        ++rectangle;
      } else {
        xprim = e.clientX;
        yprim = e.clientY;
  
        context.beginPath();
        context.fillRect(x, y, xprim - x, yprim - y);
        context.stroke();
        rectangle = 0;
      }
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.canvas_for_rectangle{
      border: 1px solid black;
      height: 50%;
      width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" class="canvas_for_rectangle"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Nothing is being shown on the canvas and I have no idea of what is not being done correctly as I am extremely new to the language. What am I doing wrong and what do I have to research?</p>