title: "Infinite" line that passes through two points
body: <p>In the following setup, how can I draw an "infinite" line that passes through two points?</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>var context = document.getElementById("canvas").getContext("2d");
  
  var point1 = {
      x : 120,
      y : 100,
  };
  
  var point2 = {
      x : 250,
      y : 300,
  };
  
  // mark points in the canvas
  context.fillStyle = "red";
  context.beginPath();
  context.arc(point1.x + 0.5, point1.y + 0.5, 2, 0, 2 * Math.PI);
  context.fill();
  context.beginPath();
  context.arc(point2.x + 0.5, point2.y + 0.5, 2, 0, 2 * Math.PI);
  context.fill();
  
  // draw a line between two points
  context.beginPath();
  context.moveTo(point1.x, point1.y);
  context.lineTo(point2.x, point2.y);
  context.stroke();
  
  // draw an "infinite" line that passes through two points
  // ??</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: sans-serif;
      box-sizing: border-box;
      background-color: hsl(0, 0%, 90%);
  }
  canvas {
      display: block;
      margin: 20px;
      background: white;
      box-shadow: 0 0 1px rgba(0,0,0,.2),
                  0 0 3px rgba(0,0,0,.15),
                  0 1px 2px rgba(0,0,0,.15);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that I need to calculate new coordinates that are on the same path, but are outside of the view (canvas) and draw a line between them to fake an infinite line.</p>
  
  <p>These new coordinates don't necessarily have to be on the edges of the canvas. I think that would require extra calculation. So I'm thinking something like</p>
  
  <pre><code>current position ± canvas diagonal (max distance in canvas)
  </code></pre>
  
  <p>just to make sure the new coordiates are always outside of canvas, and skip redundant calculation.</p>
  
  <p>How do I calcutate these new coordinates?</p>