JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id="myCanvas" style="background-color:rgba(50,50,50,0.01)"></canvas>
<canvas id="myCanvas2" style="background-color:rgba(50,50,50,0.01)"></canvas>
<div class="height"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
.height {
    height: 200vh;
}

JavaScript

var CumulativeReturn = [1, 1];
var CumReturnMin = 2;
var CumReturnMax = 0;
var graphRange = 0;

function RandomReturns(iterations) {
    for (xcan = 1; xcan < iterations; xcan++) {
        do {
            var rand1 = Math.random();
            var rand2 = Math.random();
            var x1 = 2.0 * rand1 - 1.0;
            var x2 = 2.0 * rand2 - 1.0;
            var wCanvas = Math.pow(x1, 2) + Math.pow(x2, 2);
        } while (wCanvas === 0 || wCanvas > 1);
        var CLength = CumulativeReturn.length;
        multiplier = Math.sqrt((-2 * Math.log(wCanvas)) / wCanvas);
        var DailyReturn = (multiplier * x1);
        DailyReturn = (DailyReturn / 100) + 1;
        CumulativeReturn[xcan] = CumulativeReturn[xcan - 1] * DailyReturn;
        if (CumulativeReturn[xcan] < CumReturnMin) {
            CumReturnMin = CumulativeReturn[xcan];
        }
        if (CumulativeReturn[xcan] > CumReturnMax) {
            CumReturnMax = CumulativeReturn[xcan];
        }
    }
    graphRange = CumReturnMax - CumReturnMin;
}

function clearArray() {
    CumulativeReturn = [1, 1];
    CumReturnMax = 0;
    CumReturnMin = 2;
    graphRange = 0;
}

function LineChart(array, canvas, iterations, width, height, color, offset) {
    var xCanvas = 1;
    var canvas = document.getElementById(canvas);
    var context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    var canvasHeight = myCanvas.height;
    var canvasWidth = myCanvas.width;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    /* context.moveTo(-0.01, ((array[1] / ((array[1] - CumReturnMin) / graphRange) * height); */
    context.moveTo((offset * width), height - ((1 - CumReturnMin) / graphRange) * height);
    for (aCanvas = 1; aCanvas < iterations; aCanvas++) {
        context.lineTo((((1 - offset) / iterations) * aCanvas * canvasWidth) + (offset * canvasWidth), height - ((array[aCanvas] - CumReturnMin) / graphRange) * height);
    }
   ...