<html>
<body>
  <canvas width="500" height="500"></canvas>
<script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d');

  ctx.translate(500, 500);
  var lineargradient = ctx.createLinearGradient(-500,-500,0,0);
  lineargradient.addColorStop(0,'red');
  lineargradient.addColorStop(1,'black');
  ctx.fillStyle = lineargradient;
  ctx.beginPath();
  ctx.rect(-500, -500, 250, 250);
  ctx.fill();
</script>
</body>
</html>