createLinearGradient
addColorStop
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>createLinearGradient</title>
</head> <body>
<canvas id='myCanvas' width='800' height='600'>
your browser does not support canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0.2, '#00ff00');
grd.addColorStop(0.8, '#ff0000');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100);
</script>
</body> </html>