canvas option price animated graph

by keithphw

HTML

<script src="//cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
<HTML>
<head>

</head>
<body>


<p id='demo'>
</p>
<canvas id='myCanvas' width = 500; height = 500 style='margin: 0 auto; display: block;'> 
</canvas>
    <button id="button1" type="button" class="blob3">Click Me!</button>
</body>
</HTML>

CSS

#picture {
    position: relative;
}


.blob3 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: red;
    border: 2px solid #ccc;
}

.blob3 {
    top: 180px;
    left: 160px;
}

JavaScript

"use strict";
let c=document.getElementById("myCanvas");
let ctx=c.getContext("2d");

let lastTime = 0;

function animate(timeMilliseconds) {
  // register to be called again on next frame.
  requestAnimationFrame(animate);
  // compute time elapsed since last frame.
  let dt = timeMilliseconds-lastTime;
  if (dt<10) return;
  if (dt >100) dt=16;  // consider only 1 frame elapsed if unfocused.
  lastTime=timeMilliseconds;
  updateAndDraw(dt);
}


let S0 = 5.0;
let KT = 5.0
let rf = 0.1;
let sd = 0.47;
let TYears = 1;
let tCurrentYears = 0;
let animationTimElapsedMilliseconds = 0.0;
let maxAnimationTimeMilliseconds = 3000; // 5 seconds
let StMin = 0.0;
let StMax = S0*2;
let numLines = 100;


function Player(nameStr) {
  this.nameStr = nameStr;
  this.move = null;
  this.Hu = 10;
  this.hu = 0;
}
function Move(player, formulaStr) {
  this.player = player;
  this.formulaStr = formulaStr;
}
let player = new Player("Keith");
player.move = new Move(player, "huNew = huOld + 1");


let fillStyleColor = "blue";
document.getElementById("button1").onclick=changeFillStyleColor;
function changeFillStyleColor(){
	if (fillStyleColor==="blue"){
   fillStyleColor = "red";
  }else{
   fillStyleColor = "blue";
  }
}


function updateAndDraw(dt){
ctx.fillStyle='lightgray';
ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle=fillStyleColor;


  
animationTimElapsedMilliseconds += dt;
let restartAnimation = false;
if (animationTimElapsedMilliseconds > maxAnimationTimeMilliseconds){
 animationTimElapsedMilliseconds = maxAnimationTimeMilliseconds;
 tCurrentYears = TYears;
 restartAnimation = true;
}else{
 tCurrentYears = TYears*animationTimElapsedMilliseconds/maxAnimationTimeMilliseconds;
}

let huNew = 0;
let huOld = player.hu;
eval(player.move.formulaStr);
player.hu = huNew;
document.getElementById("demo").innerHTML =
"player == " + player.nameStr + ", player.move.formula == " + player.move.formulaStr + ", huNew == " + huNew; 

let StCurrent = StMin;
let ctCurrent;
let d1;
let d2;
let...