gradients for tunnel end

canvas experimentation

by rob Davis

HTML

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

CSS

body {
        margin: 0px;
        padding: 0px;
        background-color:black;
      }

JavaScript

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

var width = 500;
var height = 500;

    var gradV = context.createLinearGradient(0,0,0,height);
    gradV.addColorStop(0, 'rgba(0,0,0,0)');
    gradV.addColorStop(0.5, 'rgba(255,255,255,1.0)');
    gradV.addColorStop(1, 'rgba(0,0,0,0)');
    var gradH = context.createLinearGradient(0,0,width,0);
    gradH.addColorStop(0, 'rgba(0,0,0,0)');
    gradH.addColorStop(0.5, 'rgba(255,255,255,1.0)');
    gradH.addColorStop(1, 'rgba(0,0,0,0)');

    context.save();
    context.translate(width/2,0);
    context.fillStyle=gradV;
    context.fillRect(0,0,5,height);
    context.restore();
    context.save();
    context.translate(0,height/2);
    context.fillStyle=gradH;
    context.fillRect(0,0,width,5);
    context.restore();
    var gradient = context.createRadialGradient(1, 1, 0, 1, 1, 1);
    gradient.addColorStop(0.5,'rgba(255,255,0,0.0)');
    gradient.addColorStop(0.99,'rgba(255, 255,0, 1.0)');
    drawEllipse(context, width/2, height/2, width, height, gradient);


function drawEllipse(context, cx, cy, rx, ry, fill){
    context.save();
    context.beginPath();
    context.translate(cx-rx, cy-ry);
    context.scale(rx, ry);
    var ellipseFill;
    if (typeof(fill)==='function') {
        ellipseFill=fill(context);
    } else {
        ellipseFill=fill;
    }
    context.arc(1, 1, 1, 0, 2 * Math.PI, false);
    context.fillStyle = ellipseFill;
    context.fill();
    context.closePath();
    context.restore();
}