JSFiddle - React, Tailwind, and code Playground

by Bodman

HTML

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

JavaScript

var x = -200;
var animFlag;
var canvas;
var ctx;
var amplitude = 30;
var code = '';
var step = 5;
var width = 5000;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.strokeStyle = '#00000';
    ctx.strokeWidth = 1;
    for (x; x < width; x += step) {
        sineWave();
    }

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

function sineWave() {
    // Find the sine of the angle
    var y = Math.sin(x * Math.PI / 180);

    // If the sine value is positive, map it above y = 100 and change the colour to blue
    if (y >= 0) {
        y = 100 - (y - 0) * amplitude;
    }

    // If the sine value is negative, map it below y = 100 and change the colour to red
    if (y < 0) {
        y = 100 + (0 - y) * amplitude;
    }

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

init();