canvas to WebGL : <p>I tried to study WebGL, but I have nothing.
I do not want to use the library, they are too big.
I wrote what I want on the canvas, help me to do it on WebGL</p>

<p><a href="https://jsfiddle.net/g9tx903c/" rel="nofollow">https://jsfiddle.net/g9tx903c/</a></p>

<pre><code>&lt;canvas id="canvas" width="500" height="200"&gt;&lt;/canvas&gt;

&lt;script type='text/javascript'&gt;
    function DrawPoint(x, y, size, blur, opacity) {
        var c = document.getElementById('canvas');
        var ctx = c.getContext('2d');

        var halfSize = size / 2;

        var radgrad = ctx.createRadialGradient(halfSize + x, halfSize + y, 0, halfSize + x, halfSize + y, halfSize);
        radgrad.addColorStop(blur, 'rgba(255, 255, 255, ' + opacity +')');
        radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
        ctx.fillStyle = radgrad;
        ctx.fillRect(x, y, size, size);
    }


    function DrawcGradient() {
        var w = 500;
        var h = 200;

        var pointR = w / 2;
        var x = (w / 2);
        var y = (h / 2);

        var c = document.getElementById('canvas');
        var ctx = c.getContext('2d');
        var grd = ctx.createRadialGradient(x, y, 0, x, y, pointR);
        grd.addColorStop(0, '#5A6977');
        grd.addColorStop(1, '#000');
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, w, h);
    }


    DrawcGradient();
    DrawPoint(50, 100, 50, 0.5, 0.2);
    DrawPoint(70, 10, 150, 0.93, 0.2);
&lt;/script&gt;
</code></pre>
