Méthode : CanvasRenderingContext2D.createLinearGradient()

<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, 200, 250);
 gradient.addColorStop(0, '#000000');
 gradient.addColorStop(1, '#ffffff');
 
 /* Représentation du gradient sur l'ensemble du canvas */
 myContext.fillStyle=gradient;
 myContext.fillRect(0,0,300,300);

 /* Représentation du vecteur */
 myContext.strokeStyle="#ff0000";
 myContext.lineWidth=2;
 myContext.beginPath();
 myContext.moveTo(50,50);
 myContext.lineTo(200, 250);
 myContext.stroke();
 myContext.fillStyle="#ff0000";
 myContext.font="15px arial";
 myContext.fillText("Point 0", 55, 50);
 myContext.fillText("Point 1", 205, 250);

 /* Création du second gradient */
 var gradient2=myContext.createLinearGradient(50, 50, 200, 250);
 gradient2.addColorStop(0, '#ffa500');
 gradient2.addColorStop(1, '#ffffff');
 
 /* Création d'un rectangle plein avec le second gradient */
 myContext.beginPath();
 myContext.fillStyle=gradient2;
 myContext.fillRect(180,20,110,185);
 myContext.rect(180,20,110,185);
 myContext.stroke();
</script>