<!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,450); grad.addColorStop(0, '#0000ff'); grad.addColorStop(0, '#ff0000'); ctx.fillStyle = grad; ctx.fillRect(0,0,300,300); </script> </body>