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>