Comment: The html5 tutorial realizes the gradient color effect of Photoshop, please refer to it
<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5 Drawing Lines, Circles, Rectangles</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">"></script</a>>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d");//Get a reference to the 2d content, call the drawing API</p><p>//Specify the gradient block
var grd=draw.createLinearGradient(50,50,200,50); //Coordinates, length and width
grd.addColorStop(0,"black"); //Start color
grd.addColorStop(1,"green");//End point color</p><p>draw.fillStyle=grd;//Set as fill style
draw.fillRect(50,50,200,50); //Fill into the rectangle
})
</script>
</body>
<canvas></canvas>
</body>
</html>
Reproduction image: