<!doctype html> <body> <canvas id="canvas" width="300" height="300"> <script> var ctx = document.getElementById('canvas').getContext('2d'); var grad = ctx.createLinearGradient(0,-150,0,150); grad.addColorStop(1, '#0000ff'); grad.addColorStop(1, '#ff0000'); ctx.fillStyle = grad; ctx.fillRect(0,0,300,300); </script> </body>