JSFiddle - React, Tailwind, and code Playground

by booka66

HTML

<canvas id="canvas" width="900" height="200"></canvas>
<div id="code"></div>

JavaScript

var x = -200;
var animFlag;
var canvas;
var ctx;
var code = '';
var step = 15;
var width = 50000;
var hard = 20;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    for (x; x < width; x += step) {
        sineWave();
    }

    ctx.stroke();
    code += '##';
    $('#code').html(code);
}

function sineWave() {
    // Find the sine of the angle
    y = 120 + Math.floor((Math.random() * hard) + 1);
    x += step*5;
    hard+=0.01;


    ctx.lineTo(x,y);
    code += ' ' + x.toString(32) + ' ' + y.toString(32);
}

init();