transformed-gradient.html

Enable keyboard shortcuts

<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>