Canvas graphic

graph.js

window.onload = () => {graph()};

function graph(){
    const canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    ctx.lineWidth = 0.5;
    const minX = 20;
    const minY = 10;
    const arrowWidth = 3;
    const arrowLength = 5;
    const maxY = 180;
    const maxX = 300;
    const divisionsX = 10;
    const divisionsY = 10;
    const stepX = (maxX - minX) / divisionsX;
    const stepY = (maxY - minY) / divisionsY;
    ctx.beginPath();
    //Lines and arrows 
    ctx.moveTo(minX, minY);
    ctx.lineTo(minX - arrowWidth, minY + arrowLength);
    ctx.moveTo(minX, minY);
    ctx.lineTo(minX + arrowWidth, minY + arrowLength);
    ctx.moveTo(minX, minY);
    ctx.lineTo(minX, maxY);
    ctx.lineTo(maxX, maxY);
    ctx.lineTo(maxX - arrowLength, maxY - arrowWidth);
    ctx.moveTo(maxX, maxY);
    ctx.lineTo(maxX - arrowLength, maxY + arrowWidth);
    //Divisions
    moveTo(minX, maxY);
    for (let i = 0, n = 0; i < maxX - stepX; i = i + stepX, n++){
        ctx.strokeText(`${n}`, minX + i - 3, maxY + arrowWidth * 5);
        ctx.moveTo(minX + i, maxY + arrowLength - 1);
        ctx.lineTo(minX + i, maxY - arrowLength + 1);
        if (n % 2 !== 0){
            ctx.moveTo(minX + (i - stepX/2), maxY + arrowWidth);
            ctx.lineTo(minX + (i - stepX/2), maxY - arrowWidth);
            ctx.moveTo(minX + (i + stepX/2), maxY + arrowWidth);
            ctx.lineTo(minX + (i + stepX/2), maxY - arrowWidth);
        }
    }
    for (let i = 0, n = 0; i < maxY - stepY; i = i + stepY, n++){
        if (n !== 0){
            ctx.strokeText(`${n}`, minX - arrowWidth * 5, maxY - i + 3);
        }
        ctx.moveTo(minX + arrowLength - 1, maxY - i);
        ctx.lineTo(minX - arrowLength + 1, maxY - i);
        if (n % 2 !== 0){
            ctx.moveTo(minX + arrowWidth, maxY - (i - stepY/2));
            ctx.lineTo(minX - arrowWidth, maxY - (i - stepY/2));
            ctx.moveTo(minX + arrowWidth, maxY - (i + stepY/2));
            ctx.lineTo(minX - arrowWidth, maxY - (i + stepY/2));
        }
    }
    ctx.stroke();
}