Radial fade

radial gradient creates the illusion of alpha mask

by rob Davis

HTML

<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;


drawGrid(width,height,'#f0f0f0');

context.beginPath();
context.strokeStyle='#000000';
for (var angle=0;angle<360;angle+=15){
    drawLine(width/2,height/2,240,angle);
}

      context.rect(0, 0, width,height);

      // create radial gradient
      var grd = context.createRadialGradient(width/2, height/2, 100, width/2, height/2, width);
      // light blue
      grd.addColorStop(0, "rgba(255,255,255,1)");
      // dark blue
      grd.addColorStop(1, "rgba(255,255,255,0)");

      context.fillStyle = grd;
      context.fill();

function drawLine(sx,sy,length, angle)
{
    var angleRad = deg2Rad(angle);
    var dx = sx + length*Math.cos(angleRad);
    var dy = sy + length*Math.sin(angleRad);
    context.save();
    context.moveTo(sx, sy);
    context.lineTo(dx, dy);
    context.stroke();
    context.restore();
}

function deg2Rad(deg) {
    return deg * Math.PI / 180;
}



function drawGrid(w,h,style)
{
    context.beginPath();
    var x=0;
    var y=0;
    for (y=0;y<h;y+=(h*.1)){
            context.moveTo(x, y);
            context.lineTo(w, y);
    }
    y=0;
    for (var x=0;x<w;x+=(w*.1)){
            context.moveTo(x, y);
            context.lineTo(x, h);
    }
    context.fillStyle=style;
    context.fillRect(0,0,w*0.1,h*0.1);
    context.fill();
    //context.lineWidth = 7;
    context.strokeStyle=style;
    context.stroke();
}