canvas option price animated graph

by keithphw

HTML

<script src="//cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
<h1 style='text-align:center'>
Call option price versus underlying asset price over time
</h1>
<canvas id='myCanvas' width = 100; height = 100 style='margin: 0 auto; display: block;'> 
</canvas>

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var lastTime = 0;

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


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

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

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

var StCurrent = StMin

var border = 30;

var graphXCoord = border;
var graphYCoord = border;
var graphWidth = c.width-2*border;
var graphHeight = c.height-2*border;
// for loop to draw option price versus underlying asset price graph 
for (var i = 0; i <= numLines; i++){
 StCurrent = StMin+(i/numLines)*(StMax-StMin);
 timeUntilExpiryYears = TYears-tCurrentYears;
 var d1 = (Math.log(StCurrent/KT) + (rf +  Math.pow(sd,2)/2)*timeUntilExpiryYears)/(sd*Math.pow(timeUntilExpiryYears,0.5));
 var d2 = d1 - sd*Math.pow(timeUntilExpiryYears,0.5);
 var Nd1 = jStat.normal.cdf(d1,0,1);
 var Nd2 = jStat.normal.cdf(d2,0,1);
 var ctCurrent = StCurrent*Nd1 - KT*Math.exp(-rf*timeUntilExpiryYears)*Nd2;
 if (i == 0){
  ctx.beginPath();
  ctx.moveTo(graphXCoord+graphWidth*StCurrent/StMax, graphYCoord+graphHeight-graphHeight*ctCurrent/StMax);
 }else{
 ...