Здравствуйте, подскажите, пожалуйста, как можно модифицировать данный график

Есть данный код, получается такой график (синего цвета), мне бы хотелось немного его улучшить, а именно довести до такого до графика (красного цвета), а также добавить значения(точки), где график касается ось абсцисс.

const canvasPlot = document.getElementById('canvas_plot');
const ctx = canvasPlot.getContext('2d');

const canvasPlotWidth = canvasPlot.clientWidth;
const canvasPlotHeight = canvasPlot.clientHeight;

const scaleX = 17;
const scaleY = 15;
const shiftNames = 5;
const shiftAxisNames = 20;

const xAxis = Math.round(canvasPlotWidth / scaleX / 2) * scaleX;
const yAxis = Math.round(canvasPlotHeight / scaleY / 2) * scaleY;

ctx.font = '${Math.round(scaleX / 2)}px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';

 // сеткa
ctx.beginPath();
ctx.strokeStyle = '#f5f0e8';

for (let i = 0; i <= canvasPlotWidth; i = i + scaleX) {
    ctx.moveTo(i, 0);
    ctx.lineTo(i, canvasPlotHeight);

    ctx.fillText((i - xAxis) / scaleX, i + shiftNames, yAxis + shiftNames);
}

for (let i = 0; i <= canvasPlotHeight; i = i + scaleY) {
    ctx.moveTo(0, i);
    ctx.lineTo(canvasPlotWidth, i);

    ctx.fillText((yAxis - i) / scaleY, xAxis + shiftNames, i + shiftNames);
}

ctx.stroke();
ctx.closePath();

//глалвные оси
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.moveTo(xAxis, 0);
ctx.lineTo(xAxis, canvasPlotHeight);
ctx.fillText('Y', xAxis - shiftAxisNames, 0);

ctx.moveTo(0, yAxis);
ctx.lineTo(canvasPlotWidth, yAxis);
ctx.fillText('X', canvasPlotWidth - shiftAxisNames, yAxis - shiftAxisNames);

ctx.stroke();
ctx.closePath();

//график
// y = 0.61 + 5.88 * x + 0.64 * Math.pow(x, 2) - 4.62 * Math.sin(x);

ctx.fillStyle = '#191970';
for (let i = 0; i <= canvasPlotWidth; i++) {
    const x = (i - xAxis) / scaleX;
    const y = 0.61 + 5.88 * x + 0.64 * Math.pow(x, 2) - 4.62 * Math.sin(x);
    ctx.fillRect(x * scaleX + xAxis, yAxis - scaleY * y, 4, 4);
    
}