A more "Normal" canvas.

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"

const canvas = document.getElementById("theCanvas")
const 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()

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


Setup()
Draw()