画布绘制带有线性渐变的圆角矩形

Question

I've got a problem with drawing linear gradient filled rect. The two screenshots are from chrome (left) and Firefox (right). As you can see, the gradient is only applied to the rect on the first 170px (you could see it better on the right image, because firefox fills up the rest with the colorStop you've added at last). The following code does fill the rect with 200px of gradient height, and I don't know why only 170px are filled up. Height = 200, left = 30, top = 30, Width = 300, radius = 3;

//Fill
var lingrad = gcx.createLinearGradient(0, top, 0, Height);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(0.5, 'red');
lingrad.addColorStop(1, 'white');
lingrad.addColorStop(1, 'blue');
gcx.fillStyle = lingrad;
gcx.beginPath();
gcx.lineWidth = 1;
gcx.moveTo(left + radius, top);
gcx.lineTo(left + Width - radius, top);
//Top-right-corner:
gcx.arc(left + Width - radius, top + radius, radius, (Math.PI / 180) * 270, (Math.PI / 180) * 0, false);
gcx.lineTo(left + Width, top + Height - radius);
//Bottom-right-corner:
gcx.arc(left + Width - radius, top + Height - radius, radius, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false);
gcx.lineTo(left + radius, top + Height);
//Bottom-left-corner:
gcx.arc(left + radius, top + Height - radius, radius, (Math.PI / 180) * 90, (Math.PI / 180) * 180, false);
gcx.lineTo(left, top + radius);
//Top-left-corner:
gcx.arc(left + radius, top + radius, radius, (Math.PI / 180) * 180, (Math.PI / 180) * 270, false);
gcx.closePath();
gcx.fill();

Thanks for help!

Answer 1

The problem is that the gradients height is not calculated relative to the y1-Startpoint of the gradient, its calculated from y0-Startpoint of the canvas element. Changing the code for y2 to y2 + y1 (endpoint is now calculated relative to startpoint), fixed the problem.

var lingrad = gcx.createLinearGradient(x1, y1, x2, y2 + y1);