graph.js/main.js

const canvas = $('#canvas');
const ctx = canvas[0].getContext('2d');
const equationField = document.getElementById('equation');

let width = 500;
let height = 500;

let originX = width / 2;
let originY = height / 2;
let scaleFactorX = 100;
let scaleFactorY = 100;

let equation = "x ** 2";
equationField.innerText = equation;

function fun(x) {
    return eval(equation);
}

function parseFunction(string) {

}

function drawGrid() {
    ctx.strokeStyle = '#bbb';
    ctx.lineWidth = 1;
    ctx.beginPath();

    let sizeX = Math.max(scaleFactorX, 25);
    let sizeY = Math.max(scaleFactorY, 25);

    const startX = originX % sizeX;
    const endX = startX + width * 1.1;
    const startY = originY % sizeY;
    const endY = startY + height * 1.1;


    for (let i = startX; i <= endX; i += sizeX) {
        ctx.moveTo(i, 0);
        ctx.lineTo(i, height);
    }
    for (let i = startY; i <= endY; i += sizeY) {
        ctx.moveTo(0, i);
        ctx.lineTo(width, i);
    }

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

function drawAxis() {
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.beginPath();

    ctx.moveTo(0, originY);
    ctx.lineTo(width, originY);
    ctx.moveTo(originX, 0);
    ctx.lineTo(originX, height);

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

function drawFunction(ctx) {
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 4;
    ctx.beginPath();

    const startX = -originX / scaleFactorX;
    const endX = (width - originX) / scaleFactorX;

    for (let i = startX - 1; i < endX + 1; i += 0.01) {
        const valX = i;
        const valY = fun(i);

        const posX = originX + valX * scaleFactorX;
        const posY = originY - valY * scaleFactorY;

        ctx.lineTo(posX, posY);
    }
    ctx.stroke();
    ctx.closePath();
}

function redraw() {
    ctx.clearRect(0, 0, width, height);
    drawGrid();
    drawAxis();
    drawFunction(ctx);
}

equationField.addEventListener('keyup', function () {
    console.log(this);
    equation = this.innerText;

    redraw();
});

let mouseDown = false;
let mouseDragging = false;
let mouseAxisResizing = false;
let mouseStart = null;

canvas.on('mousedown', function (e) {
    mouseDown = true;
    mouseStart = calcMousePos(e);
});

canvas.on('mouseup mouseout', function () {
    mouseDown = false;
    mouseDragging = false;
    mouseAxisResizing = false;
});

canvas.on('mousemove', function (e) {
    if (mouseDown) {
        const pos = calcMousePos(e);
        const deltaX = pos.x - mouseStart.x;
        const deltaY = pos.y - mouseStart.y;

        if (mouseAxisResizing) {

        } else if (mouseDragging) {

        } else {

        }

        if (!mouseDragging && Math.abs(pos.x - originX) < 15 && (Math.abs(deltaY) > Math.abs(deltaX) || mouseAxisResizing)) {
            mouseAxisResizing = true;

            if (mouseStart.y < originY)
                scaleFactorY -= deltaY;
            else
                scaleFactorY += deltaY;

        } else if (!mouseDragging && Math.abs(pos.y - originY) < 15 && (Math.abs(deltaX) > Math.abs(deltaY) || mouseAxisResizing)) {
            mouseAxisResizing = true;

            if (mouseStart.x < originX)
                scaleFactorX -= deltaX;
            else
                scaleFactorX += deltaX;

        } else if (!mouseAxisResizing) {
            mouseDragging = true;
            originX += deltaX;
            originY += deltaY;
        }

        mouseStart = pos;

        redraw();
    }
});

function calcMousePos(e) {
    const x = e.clientX - canvas.offset().left;
    const y = e.clientY - canvas.offset().top;
    return {x, y};
}

function onResize() {
    const relOriginX = originX / width;
    const relOriginY = originY / height;

    width = canvas.width();
    height = canvas.height();
    canvas[0].width = width;
    canvas[0].height = height;

    originX = relOriginX * width;
    originY = relOriginY * height;

    redraw();
}

$(window).on('resize', onResize);

$(function () {
    onResize();
});