Why it doesn't draw the exponential curve in canvas?

user_15614900 0
Viewed 57

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

This is my code

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()
}
<body onload="draw()">
  <canvas height="800" width="800" id="myCanvas"></canvas>
  <script src="script.js"></script>
</body>

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)

html5-canvas html javascript
1 Answers

Looks like drawing lines to very high negative numbers causes problems...

If you want that code to show something useful, we can add an if statement for those with positive Y values, we could also restrict to a not so big negative, but I leave that up to you.
I'm drawing arcs to show the points and also divide the output of the function to lower the amount, showing different curves.

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

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

let colors = ["black","cyan", "red", "blue", "green", "pink"]
for (let i = 1; i <= colors.length; i++) {
  ctx.beginPath()
  ctx.strokeStyle = colors[i-1]
  for (let x = -offset; x < offset; x++) {
    let y = f(x/i) + offset + i*10
    if (y > 0) {
      ctx.arc(x + offset, y, 1, 0, 6)
    }
  }
  ctx.stroke()
}
<canvas height="200" width="200" id="myCanvas"></canvas>

Here is your entire code:

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++) {
    let y = f(x) + offset
    if (y > -1000) {
      ctx.lineTo(x + offset, y)
    }
  }
  ctx.stroke()
}
<body onload="draw()">
  <canvas height="200" width="200" id="myCanvas"></canvas>
</body>

user_75998330
Related