Why it doesn’t draw the exponential curve in canvas? – Blancer.com Tutorials and projects

I’m learning the basics of javascript at school, now I’m working on the canvas

This is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Funzioni Geometriche</title>

</head>
<body onload="draw()">
    <canvas height="800" width="800" id="myCanvas"></canvas>

    <script src="script.js"></script>
</body>
</html>

canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
offset = canvas.width/2

function assi(){
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath()
    ctx.moveTo(offset, 0)
    ctx.lineTo(offset, offset*2)
    ctx.moveTo(0, offset)
    ctx.lineTo(offset*2, offset)
    ctx.stroke()
}

function f(x){
    return Math.pow(2, x)*-1;
}

function draw() {
    assi()
    ctx.beginPath()
    ctx.strokeStyle = "red"

    moveTo(offset, f(0)+offset)
    for (let x = -offset; x < offset; x++) {
        ctx.lineTo(x+offset, f(x)+offset)
    }
    ctx.stroke()
}

This is my question
why in the function f(x) if I leave *-1 it doesn’t draw anything, while if I delete *-1 it draws something?
It draws linear functions, but the exponential function gives problem, and is not Math.pow() the problem, because if I use 1 as base it works (actually draws a line, but is right)

The *-1 is needed to mirror the y-axis of canvas axis system (up to down) into cartesian axis system (down to up)