How to draw a triangle with degraded fill in Canvas

When I was learning 2D and Canvas in Javascript, I was wondering how to draw a triangle with degraded fill, like a vision field for an enemy in a game. Here is the answer:

How to draw a triangle with degraded fill in Canvas

Take a look at the next Javascript function called draw(), note the comments inside.

function draw() { 
  var canvas = document.getElementById('canvas'); 
  if (canvas.getContext) { 
    var ctx = canvas.getContext('2d'); 
    // Determine the triangle
    ctx.beginPath(); 
    ctx.moveTo(400,0);
    ctx.lineTo(0,250); 
    ctx.lineTo(400,500); 
    // Determine the degraded fill and its colors 
    var lingrad = ctx.createLinearGradient(200,250,400,250); 
    lingrad.addColorStop(0, '#00EBAB'); 
    lingrad.addColorStop(0.9, '#000') 
    // Combine 
    ctx.fillStyle = lingrad; 
    ctx.fill(); 
  } // Else Browser not compatible with Canvas
}
draw();

Check out the demo available on JsFiddle.

Feel free to leave your comment!