<canvas id="myCanvas" width="300" height="300"></canvas>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var grd=context.createLinearGradient(0,0,0,100);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

context.fillStyle = grd;  //填滿顏色

context.fillRect(0,0,175,100); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.