A more "Normal" canvas.

The HTML file:

<html>
<head>
    <script src="demo.js" defer></script>
</head>
<body>
    <h1>A more "Normal" canvas.</h1>
    <canvas id="theCanvas" 
         width=300 height=300 
         style="border:1px solid black;">
    </canvas>
</table>
</body>
</html>

demo.js

"use strict"

let canvas = document.getElementById("theCanvas")
let ctx = canvas.getContext('2d')

function Setup() {
    ctx.setTransform(1, 0, 0, -1, canvas.width/2, canvas.height/2);
}

function Axis() {
    ctx.beginPath();
    ctx.strokeStyle = "black";

    // x axis
    ctx.moveTo(-canvas.width/2, 0)
    ctx.lineTo(canvas.width/2, 0)

    // tick marks
    for(let i = 10; i < canvas.width/2; i+= 10) {
       // positive x
       ctx.moveTo(i,3);
       ctx.lineTo(i,-3);

       // negative x 
       ctx.moveTo(-i,3);
       ctx.lineTo(-i,-3);

       // positive/negative y
       ctx.moveTo(3, i);
       ctx.lineTo(-3,i);
       ctx.moveTo(3, -i);
       ctx.lineTo(-3,-i);

    }

    ctx.moveTo(0, -canvas.height/2)
    ctx.lineTo(0, canvas.height/2)
    ctx.stroke();
}

function Parabala(x) {
      return  1/100 * x * x + 10; 
}

function Cubic(x) {
        return 1/15000*x*x*x + 1/1000*x*x - 1/8 * x - 10; 
}

function DrawFunction (F) {
    let first = true;
    let x,y;

    ctx.beginPath();

    for(x = -canvas.width/2; x < canvas.width/2; x += 3) {
        y = F(x);
        if (first) {
            ctx.moveTo(x,y);
            first = false;
        } else {
            ctx.lineTo(x,y);
        }
    }

    ctx.stroke();
}

function Draw() {
    Axis();
    Parabala();

    ctx.strokeStyle = "red"
    DrawFunction(Parabala);
    ctx.strokeStyle = "blue"
    DrawFunction(Cubic);
}


Setup()
Draw();