Objet : CanvasGradient

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

/* Création du gradient */
var gradient=myContext.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, '#0f0');
gradient.addColorStop(1, '#00f');

/* Remplissage du gradient sur l'ensemble du canvas */
myContext.fillStyle=gradient;
myContext.fillRect(0,0,300,100);
</script>