JSFiddle - React, Tailwind, and code Playground

HTML

<head lang="en">
    <title>CanvasAPI</title>
</head>
<body >
</body>

JavaScript

$(document).ready(function() {
            var newCanvas =$('<canvas/>',{'class':'radHuh'})
                    .width(700)
                    .height(400)
                    .attr({
                        id: "myCanvas"
                    });
            $("body").append(newCanvas);
            var c = $("#myCanvas")[0];
            //usecanvas(c);
            usewebgl(c);

        });

        function usecanvas(c){
            var ctx = c.getContext('2d');
            ctx.fillStyle = 'hsl(0,22%,47%)';
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            var text = "Hello World";
            ctx.fillStyle = 'white';            ctx.lineWidth = 2.5;
            ctx.strokeStyle = 'black';
            ctx.save();
            ctx.font = 'bold 22px verdana';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';

            ctx.fillText(text,10,ctx.canvas.height / 2);
            ctx.restore();
        }

        function usewebgl(c){
            var gl = c.getContext('experimental-webgl');
            gl.clearColor(0,0,0.8,1);
            var texture = gl.createTexture();
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
            gl.bindTexture(gl.TEXTURE_2D, null)
        }