I am trying to create a graph using javascript where I will be able to show equations via y = mx + b. I have a few methods that would create the x and y axis and I have a method that draws the line, based on user input (on click of a draw line button). However, I am unable to figure out how to make the previous line disappear whenever I click the draw line button.

Graph.prototype.drawLine = function(slope, yintercept, color, thickness) {
    console.log("Inside drawline");

    console.log("this.maxX: " + this.maxX + " this.maxY: " + this.maxY);

    var context = this.context;

    // draw x and y axis
    this.drawXAxis();
    this.drawYAxis();

    //context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    context.save();
    context.save();
    this.transformContext();

    console.log("this.minX: " + this.minX);
    console.log("this.iteration: " + this.iteration);
    console.log("yintercept: " + yintercept);
    console.log("slope:" + slope);

    context.beginPath();
    context.moveTo(this.minX, slope * this.minX + yintercept);

    for(var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) {
      if (this.iteration % 200 == 0){
       console.log("x: " + x + " y: " + (slope * x + yintercept));
      }
      context.lineTo(x, slope * x + yintercept);
    }

    context.restore();
    context.lineJoin = 'round';
    context.lineWidth = thickness;
    context.strokeStyle = color;
    context.stroke();
    context.restore();
  };

This is my jQuery:

$("#btnGraph").click(function(){
  
    // myGraph.clearCanvas()

    var m1,b1,m2,b2 = 0;

    m1 = parseFloat($("#m1").val());
    b1 = parseFloat($("#b1").val());
   
    var myGraph = new Graph({
     canvasId: 'Graph',
     minX: -10,
     minY: -10,
     maxX: 10,
     maxY: 10,
     unitsPerTick: 1
    });      
    
    myGraph.drawLine(m1, b1, 'blue', 3);
    
    //myGraph.drawEquation(function(x) {
     //return 1 * x;
    //}, 'red', 3);
  });