How to bind a graph to the canvas coordinate system?

Question

JavaScript

How to bind the coordinate system, without negative values ​​from 0, by y - there were seconds, by x - coefficients, and if, for example, the arrow goes out of bounds, then add values ​​\u200b\u200bto the coordinate system like here https://www.wink.org/?r= cryptofriend#/platform/dic...

so far I'm stuck

var canvas = document.getElementById('crash-canvas');
var ctx = canvas.getContext('2d');

requestAnimationFrame(animate)

function lerp(a,b,t) {
  return a + (b-a)*t
}

function animate(t){
  t /= 2000;
  if (t > 1) return;
  let x = lerp(10, 590, t)
  let y = lerp(390, 100, t)
  ctx.clearRect(0, 0, canvas.width, canvas.height);	
  arrow({x: 10, y: 390}, {x, y}, 20);
  requestAnimationFrame(animate)
}

function arrow (p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y) , (p2.x - p1.x));
  var hyp = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));

  ctx.save();
  ctx.translate(p1.x, p1.y);
  ctx.rotate(angle);

  
  // line
  ctx.strokeStyle = '#01f593';
  ctx.lineWidth = "5";
  ctx.beginPath();	
  ctx.moveTo(0, 0);
  ctx.lineTo(hyp - size, 0);
  ctx.stroke();

  // triangle
  ctx.fillStyle = '#01f593';
  ctx.beginPath();
  ctx.lineTo(hyp - size , size/2);
  ctx.lineTo(hyp, 0);
  ctx.lineTo(hyp - size, -size/2);
  ctx.fill();

  ctx.restore();

  ctx.fillStyle = '#01f59344';
  ctx.beginPath();
  ctx.lineTo(0,390);
  ctx.lineTo(p2.x, p2.y);
  ctx.lineTo(p2.x,390);
  ctx.fill();
}

body {
  background:black
}

<canvas width="999" height="400" id="crash-canvas" style="width: 999px; height: 400px;"></canvas>

Answer 1

I'm a little off topic, I looked by accident. And I didn't really understand the question.
Let's say you want to display on the screen a set of points with known coordinates. And it is not known in advance within what limits the coordinates of the points will be.
Let's say the points appear one at a time, and after the appearance of each, you need to display it.
Then, when a new point appears, it is necessary to calculate the maximum X and Y coordinates. More precisely, it is enough to compare the X and Y of the new point with the maximum X and Y of the previous points. If they have not changed (i.e. X of the new point does not exceed the maximum X for old points, and similarly for Y), then we simply draw a new point.
But if at least one coordinate is exceeded, then all points must be redrawn in a new scale.
Sometimes a proactive scaling method is used. Those. when X or Y increases, the new limit value takes five percent more than the new point. And if the next point does not go beyond this value, then you can not redraw it, but leave it on the old scale.