Почему не отображается линия canvas?

let k = +document.getElementById("k").value; 
let b = +document.getElementById("b").value; 
let x1 = +document.getElementById("x1").value; 
let x2 = +document.getElementById("x2").value; 
 
let posX1, posY1, posX2, posY2; 
 
var canvas = document.getElementById("canvas2d"); 
var context = canvas.getContext("2d"); 
 
context.fillStyle = "#e6f0d3"; 
context.fillRect(0, 0, canvas.width, canvas.height); 
 
// Рисуем ось X красным цветом 
context.beginPath(); 
context.moveTo(0, canvas.height / 2); 
context.lineTo(canvas.width, canvas.height / 2); 
context.strokeStyle = '#ff0000'; 
context.stroke(); 
 
// Рисуем ось Y зелёным цветом 
context.beginPath(); 
context.moveTo(canvas.width / 2, 0); 
context.lineTo(canvas.width / 2, canvas.height); 
context.strokeStyle = '#00ff00'; 
context.stroke(); 
 
context.font = "8px Verdana"; 
context.strokeStyle = "black"; 
 
context.strokeText("(x:0;y:0)", canvas.width / 2 + 5, canvas.height / 2 + 10); 
 
function drawGraph() { 
 
  k = +document.getElementById("k").value; 
  b = +document.getElementById("b").value; 
  x1 = +document.getElementById("x1").value; 
  x2 = +document.getElementById("x2").value; 
 
  posY1 = k * x1 + b; 
  posY2 = k * x2 + b; 
 
  context.beginPath(); 
  context.moveTo(x1, posY1); 
  context.lineTo(x2, posY2); 
 
  context.strokeStyle = '#00ff00'; 
  context.stroke(); 
}

<main id="app"> 
  <header> 
    <h1>Построение графика линейной функции</h1> 
 
 
  </header> 
 
  <h3>Чтобы построить график функции вида - y = kx + b,<br>введите коэффициенты k и b ...</h3> 
  <br> 
  <br> 
  <br> 
  <form id="form"> 
    <input type="text" id="k" name="k" placeholder="введите k"> 
    <input type="text" id="b" name="b" placeholder="введите b"><br><br> 
    <input type="text" id="x1" name="x1" placeholder="введите  x1"> 
    <input type="text" id="x2" name="x2" placeholder="введите  x2"> 
 
 
 
    <a type="button" name="submit" id="submit" onclick="drawGraph()">Построить график</a> 
    <br> 
    <br> 
 
  </form> 
  <div id="answer"> 
    <h3>Чтобы построить график линейной функции,<br> которым является прямая нужно минимум две точки.<br>Для этого возмем какие нибудь 2 значения x,<br>и посчитаем координаты по y ..</h3> 
    <br> 
    <h3>1 Точка:Пусть X1 = 3, тогда y = k3 + b,подставим наши значения получим координату Y для первой точки.</h3><br> 
    <h3>2 Точка:Пусть X2 = -2, тогда y = -k2 + b,подставим наши значения получим координату Y для второй точки.</h3> 
  </div> 
 
 
 
  <canvas id="canvas2d" width="698" height="500"></canvas> 
 
 
</main>