Увеличьте масштаб моей канвы с помощью мыши (система координат)

---

Я работаю над веб-приложением, и оно включает в себя одну часть, где я рисую график функции, система координат сделана холстом. Проблема в том, что я не могу приблизиться к своей системе координат. Я хочу, чтобы он мог увеличивать и уменьшать масштаб + перемещение системы координат с помощью мыши. Значения x и y также должны увеличиваться/уменьшаться при увеличении/уменьшении масштаба.

Может кто - нибудь помочь мне с этим ?

Что я уже пробовал:

Я искал какие-то решения, но не мог найти ничего полезного. Вот почему я решил спросить об этом здесь.

Вот мои коды:

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>

<!--Canva startup-->
<script>
    // Setup values
    var height = 300;
    var width = 300;
    var zoomFactor = 15;

    // --------
    var c = document.getElementById("myCanvas");
    var xZero = width / 2;
    var yZero = height / 2;
    var ctx = c.getContext("2d");

    // Draw Cord-System-Grid
    ctx.beginPath();
    ctx.moveTo(xZero, 0);
    ctx.lineTo(xZero, height);
    ctx.strokeStyle = "#000000";
    ctx.stroke();
    ctx.moveTo(0, yZero);
    ctx.lineTo(width, yZero);
    ctx.strokeStyle = "#000000";
    ctx.stroke();
    ctx.beginPath();

    // Draw Numbers
    ctx.font = "10px Georgia";
    var heightTextX = yZero + 10;
    for(var i = 0; i < width; i = i + width / 10) {
        var numberX = (-1 * xZero / zoomFactor) + i / zoomFactor;  
        ctx.fillText(numberX, i, heightTextX);
    }

    var heightTextY = yZero + 10;
    for(var n = 0; n < height; n = n + height / 10) {
        var numberY = (-1 * yZero / zoomFactor) + n / zoomFactor;
        if(numberY !== 0)
            ctx.fillText(numberY * -1, heightTextY, n);
    }

</script>

---