JSFiddle - React, Tailwind, and code Playground

by XTREME104

HTML

<!DOCTYPE html>
<html> 
    <head> 
        <title>Animated Sine wave using HTML5 canvas</title> 

        <script type="text/javascript" charset="utf-8"> 
            
            var N = 29;
            var scaleX = 100;
            var scaleY = 50;

    function path_sin (ctx) {
        // sine path from 0 to rads radians scales by sx

            var dx = 2 * (Math.PI) / N;
        var x = 0;
        var px = 150;
        var py = 100;

        ctx.beginPath();
        ctx.moveTo(px, py);
       
        for (var i = 0; i < N ; i++) {
            x += scaleX;
            y = Math.sin(x);

            px += (180.0/(Math.PI))*dx;
            py = 100 - scaleY*y;

            ctx.lineTo(px, py);
        }
        ctx.stroke(); 
        ctx.closePath();
    }

    function path_circ (ctx, x, y, r) {
        ctx.beginPath();
        ctx.arc(x,y,r, 0, Math.PI*2, true);     //arc(x, y, radius, startAngle, endAngle, anticlockwise)
        ctx.stroke(); 
        ctx.closePath();
    }

    function path_line (ctx, x0,y0, x1,y1) {
        ctx.beginPath();

        ctx.moveTo(x0, y0);
        ctx.lineTo(x1, y1);

        ctx.stroke(); 
        ctx.closePath();
    }

    var ms = 0;
    var canw, canh;

    function millis () {
        var d = new Date();
        return d.getTime();
    }

    function init () {
        var canvas = document.getElementById('canv');
        var ctx = canvas.getContext("2d");
        canw = canvas.width;
        canh = canvas.height;

        ms = millis();
        setInterval(function () { draw(ctx); }, 50);                 // drawing loop 1/20th second
    };

    function circ_dot (ctx, t) {
        var x = 100 + 50*Math.cos(t);
        var y = 100 - 50*Math.sin(t);

        ctx.fillStyle = "Orange";
        path_dot(ctx,x,y);

        ctx.strokeStyle = "rgba(  0,255,255,0.5)";
        ctx.lineWidth = 1.5;

        path_line(ctx, 100,100, x,y);
        path_line(ctx, x,100, x,y);
    }

    function sine_dot (ctx, t) {
        var x =...