exampleFunction2d.html

<style>
    .canvasContainer {
        position: relative;
    }

    .canvasContainer canvas {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<div class="canvasContainer">
    <canvas id="grid" width="600px" height="600px"></canvas>
    <canvas id="fn2" width="600px" height="600px"></canvas>
</div>

<script src="graphplot.js" type="module"></script>
<script type="module">
    import {drawGrid, drawFunction} from './graphplot.js';

    const canvas = document.getElementById("grid");
    const config = {
        xMin: -3,
        xMax: 5,
        yMin: -1,
        yMax: 2,
        ctx: canvas.getContext("2d")
    };

    const canvasF2 = document.getElementById("fn2");
    const configF2 = Object.assign({}, config);
    configF2.ctx = canvasF2.getContext("2d");

    drawGrid(config);
    drawFunction(
        configF2,
        "#000000",
        x => ((x * x) / 10) * Math.sin(x) + 0.4 + Math.sin(x * 100) / 100
    );
</script>


<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<div style="width:600px;padding-top:620px">
    <h3>Plot of function</h3>

    <p>
    \[ f(x) = \frac{x^2}{10}\ \sin(x) + 0.4 + \frac{\sin(100 x)}{100} \]
    </p>
</div>