[IZUM]

К сожалению, не получилось, или я не знаю, как в сообщение вложить
файлы JS и HTML

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

//Рисуем сетку
const canvasPlotWidth = canvasPlot.clientWidth;
const canvasPlotHeight = canvasPlot.clientHeight;

const scaleX = 30; //расстояние между элементами сетки по Х
const scaleY = 30; //расстояние между элементами сетки по Y

//Рисуем главные оси
       // Обычное расположение осей     
//const xAxis = canvasPlotWidth / 2; 
//const yAxis = canvasPlotHeight / 2;
       // Уточнённое расположение осей за счёт сдвига осей
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`;

ctx.beginPath();
ctx.strokeStyle = `#f5f0e8`;


var zz = 5; //Зазор между осями и числами нумерации чисел

for (let i = 0; i <= canvasPlotWidth; i = i + scaleX) {
	ctx.moveTo(i, 0);
	ctx.lineTo(i, canvasPlotHeight); // нанесение вертикальных линий разметки
	
	ctx.fillText((i - xAxis) / scaleX, i + zz, yAxis + zz); //нанесение числовых значений на ось Х
}

for (let i = 0; i <= canvasPlotHeight; i = i + scaleY) {
	ctx.moveTo(0, i);
	ctx.lineTo(canvasPlotWidth, i); // нанесение горизонтальных линий разметки
	
	ctx.fillText((yAxis - i) / scaleY, xAxis + zz, i + zz); //нанесение числовых значений на ось Y
}
ctx.stroke();
ctx.closePath(); //закрыть путь, чтобы рисовать новые линии другим цветом


var zxy = 20; //Зазор между осями и обозначением этих осей  x,y 
ctx.beginPath();
ctx.strokeStyle = `#000000`;
	ctx.moveTo(xAxis, 0);
	ctx.lineTo(xAxis, canvasPlotHeight);
	ctx.fillText(`y`, xAxis - zxy, 0 ); // означение оси Y
	ctx.moveTo(0, yAxis);
	ctx.lineTo(canvasPlotWidth, yAxis);
	ctx.fillText(`x`, canvasPlotWidth - zxy, yAxis - zxy ); // означение оси X
ctx.stroke();
ctx.closePath(); //закрыть путь, чтобы рисовать новые линии другим цветом

//ПРЕОБРАЗОВАНИЕ CANVAS СИСТЕМУ КООРДИНАТ В ДЕКАРТОВУ СИСТЕМУ КООРДИНАТ
// Рисуем график функции
ctx.fillStyle = `#ff0000`; // цвет графика чёрный
//ctx.lineWidth = 0.5  //толщина линии
for (let i = 0; i <= canvasPlotWidth; i++) {
	const x = (i - xAxis) / scaleX;
	const y = Math.pow(x, 2); 
	ctx.fillRect(x * scaleX + xAxis, yAxis - scaleY * y, 4, 4);