Méthode : CanvasGradient.addColorStop()

<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
 var myCanvas=document.getElementById("myCanvas");
 var myContext=myCanvas.getContext("2d");

 /* Création du gradient */
 var gradient=myContext.createLinearGradient(50, 50, 250, 250);
 gradient.addColorStop(0, '#f00');
 gradient.addColorStop(1, '#0f0');
 
 /* Représentation du gradient sur l'ensemble du canvas */
 myContext.fillStyle=gradient;
 myContext.fillRect(0,0,300,300);
</script>