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