CanvasB

by Darby Rathbone

HTML

<script src="http://localhost:35729/livereload.js"></script>
<canvas width='512' height='512'></canvas>

JavaScript

var can = document.getElementsByTagName('canvas')[0],
    c = can.getContext('2d'),
    
    t = bufferCanvas(c);
can.width = can.width,can.height=can.width;
c.beginPath();
c.moveTo(0,0);
c.lineTo(0,can.height);
c.lineTo(Math.sqrt((can.width*can.width)-(can.width/2*can.width/2)),can.height/2);
c.lineTo(0,0);
c.clip();
c.globalCompositeOperation  = 'darker';
(bufferCanvas(c)).radialGradient(0,0,can.height,'rgb(0,0,255)','rgba(0,0,255,0)').drawTo(c,0,0);

(bufferCanvas(c)).radialGradient(Math.sqrt((can.width*can.width)-(can.width/2*can.width/2)),can.height/2,can.height,'rgb(0,255,0)','rgba(0,255,0,0)').drawTo(c,0,0);

//t.radialGradient(Math.sqrt((can.width*can.width)-(can.width/2*can.width/2)),can.height/2,can.height,'rgb(255,255,0)','rgba(255,255,0,0)');
(bufferCanvas(c)).radialGradient(0,can.height,can.height,'rgb(255,0,0)','rgba(255,0,0,0)').drawTo(c,0,0);
c.drawImage(c.canvas,0,0);
c.drawImage(c.canvas,0,0);



function bufferCanvas(C) {
    var ctx =C.canvas.cloneNode(true).getContext('2d'),
        W = C.canvas.width,
        H=C.canvas.height;
    ctx.output = function (w, h) {
        ctx.drawImage(ctx.canvas, 0, 0, W, H, 0, 0, w, h);
        return new Uint32Array(ctx.getImageData(0, 0, w, h).data.buffer);
    };
    ctx.data = function () {
        return new Uint32Array(ctx.getImageData(0, 0,W , H).data.buffer);

    };
    ctx.setData = function(d){
        var _d =  ctx.getImageData(0,0,W,H) ;
        _d.data = new  Uint8ClampedArray(d.buffer);
        ctx.putImageData(_d ,0,0);    
        return ctx;
    };
    ctx.drawTo = function (c, x, y) {
        c.drawImage(ctx.canvas, x, y,c.canvas.width,c.canvas.height,0,0,ctx.canvas.width,ctx.canvas.height);
        return ctx;
    };
    ctx.radialGradient=function(x, y, r, s, e) {
        ctx.strokeStyle = s;
        
        var b = ctx.createRadialGradient(x, y, 0, x, y, r),
            B = ctx.fillStyle;
        b.addColorStop(0, s);
        b.addColorStop(1, e);

        ctx.fillStyle = b;
       ...