Estoy tratando de crear un gráfico usando javascript donde podré mostrar ecuaciones a través de y = mx + b. Tengo algunos métodos que crearían los ejes x e y y tengo un método que dibuja la línea, según la entrada del usuario (al hacer clic en un botón de dibujar línea). Sin embargo, no puedo averiguar cómo hacer que la línea anterior desaparezca cada vez que hago clic en el botón Dibujar línea.

 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(); };

Este es mi 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); });