JSFiddle - React, Tailwind, and code Playground

by XTREME104

HTML

<html>
    <head>
        <script type="application/javascript">
            function main () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                
                var imageData = ctx.createImageData(300, 100);
                
                for (var x = 0; x < 300; x++) {
                    var y = Math.sin(x / 300 * 360 * (Math.PI / 180)) * 100;
                    var pos = (y * 300 + x) * 4;
                    imageData.data[pos] = 128;
                    imageData.data[pos+1] = 128;
                    imageData.data[pos+2] = 128;
                    imageData.data[pos+3] = 128;
                }
            
            ctx.putImageData(imageData, 0, 0);
            }
        </script>  
    </head>  
    <body onload="main()">
        <canvas id="canvas" width="300" height="100"></canvas>
    </body>
</html>