Прошу помочь привести в надлежащий и удобный для использования вид Декартову систему координат. См. картинку. рабочую область необходимо расположит с определёнными отступами от краёв холста и, соответственно, отладить управление числовыми осями координат. Нанести небольшие насечки для каждой ячейке. Слева от оси Y обязательно должна быть небольшая область, как показано на рис.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./DSK.css" rel="stylesheet">
</head>
<body style= "margin": 0;>
<canvas id="canvas_plot" width="800" height="300"></canvas>
<script src="./DSK.js"></script>
</body>
</html>
const canvasPlot = document.getElementById(`canvas_plot`);
const ctx = canvasPlot.getContext(`2d`);
//Рисуем сетку
const canvasPlotWidth = canvasPlot.clientWidth;
const canvasPlotHeight = canvasPlot.clientHeight;
const scaleX = 20; //расстояние между элементами сетки по Х
const scaleY = 20; //расстояние между элементами сетки по Y
//Рисуем главные оси
// Уточнённое расположение осей за счёт сдвига осей
const xAxis = Math.round((0 * canvasPlotWidth / scaleX / 2) * scaleX );
const yAxis = Math.round(canvasPlotHeight / scaleY / 2) * scaleY;
// Выбор шрифта и его вид, размер
ctx.font = `${Math.round(scaleX / 2)}px Times New Roman`; // высота шрифта
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(); //закрыть путь, чтобы рисовать новые линии другим цветом