P(${document.getElementById('xValue').value}) = ${result.poly1}

Q(x) = ${polynomialToString(poly2)}

Q(${document.getElementById('xValue').value}) = ${result.poly2}

`; } else if (operation === 'roots') { resultDiv.innerHTML = `

${operationName}

P(x) = ${polynomialToString(poly1)}

Roots: ${Array.isArray(result.poly1) ? result.poly1.join(', ') : result.poly1}

Q(x) = ${polynomialToString(poly2)}

Roots: ${Array.isArray(result.poly2) ? result.poly2.join(', ') : result.poly2}

`; } else { resultDiv.innerHTML = `

${operationName}

P(x) = ${polynomialToString(poly1)}

Q(x) = ${polynomialToString(poly2)}

Result: ${polynomialToString(result)}

`; } drawGraph(poly1, poly2); } function drawGraph(poly1, poly2) { const canvas = document.getElementById('polynomialGraph'); const ctx = canvas.getContext('2d'); // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Set up coordinate system const width = canvas.width; const height = canvas.height; const xMin = -5; const xMax = 5; const yMin = -10; const yMax = 10; // Draw axes ctx.strokeStyle = '#000'; ctx.lineWidth = 1; // X-axis const xAxisY = height * (yMax / (yMax - yMin)); ctx.beginPath(); ctx.moveTo(0, xAxisY); ctx.lineTo(width, xAxisY); ctx.stroke(); // Y-axis const yAxisX = width * (-xMin / (xMax - xMin)); ctx.beginPath(); ctx.moveTo(yAxisX, 0); ctx.lineTo(yAxisX, height); ctx.stroke(); // Draw grid ctx.strokeStyle = '#ddd'; ctx.lineWidth = 0.5; // Vertical grid lines for (let x = Math.ceil(xMin); x <= xMax; x++) { const pixelX = (x - xMin) / (xMax - xMin) * width; ctx.beginPath(); ctx.moveTo(pixelX, 0); ctx.lineTo(pixelX, height); ctx.stroke(); } // Horizontal grid lines for (let y = Math.ceil(yMin); y <= yMax; y++) { const pixelY = height - (y - yMin) / (yMax - yMin) * height; ctx.beginPath(); ctx.moveTo(0, pixelY); ctx.lineTo(width, pixelY); ctx.stroke(); } // Draw polynomial 1 ctx.strokeStyle = '#e74c3c'; ctx.lineWidth = 2; ctx.beginPath(); for (let i = 0; i < width; i++) { const x = xMin + (i / width) * (xMax - xMin); const y = evaluatePolynomial(poly1, x); if (y >= yMin && y <= yMax) { const pixelX = i; const pixelY = height - (y - yMin) / (yMax - yMin) * height; if (i === 0) { ctx.moveTo(pixelX, pixelY); } else { ctx.lineTo(pixelX, pixelY); } } } ctx.stroke(); // Draw polynomial 2 ctx.strokeStyle = '#3498db'; ctx.lineWidth = 2; ctx.beginPath(); for (let i = 0; i < width; i++) { const x = xMin + (i / width) * (xMax - xMin); const y = evaluatePolynomial(poly2, x); if (y >= yMin && y <= yMax) { const pixelX = i; const pixelY = height - (y - yMin) / (yMax - yMin) * height; if (i === 0) { ctx.moveTo(pixelX, pixelY); } else { ctx.lineTo(pixelX, pixelY); } } } ctx.stroke(); // Add legend ctx.fillStyle = '#e74c3c'; ctx.fillText('P(x)', 10, 20); ctx.fillStyle = '#3498db'; ctx.fillText('Q(x)', 10, 40); } // Initial graph drawing window.onload = function() { const poly1 = parsePolynomial(document.getElementById('poly1').value); const poly2 = parsePolynomial(document.getElementById('poly2').value); drawGraph(poly1, poly2); };