Leinwand Zeichnung gefüllt abgerundet Rect mit linearem Gradienten

Question

Ich habe ein Problem mit der Zeichnung linearen Gradienten gefüllt Rect. Die beiden Screenshots stammen von Chrome (links) und Firefox (rechts). Wie Sie sehen können, wird der Farbverlauf nur auf das Rect auf den ersten 170px angewendet (Sie könnten es besser auf dem rechten Bild sehen, weil Firefox den Rest mit dem zuletzt hinzugefügten colorStop ausfüllt). Der folgende Code füllt die rect mit 200px Gradient Höhe, und ich weiß nicht, warum nur 170px gefüllt sind. Höhe = 200, links = 30, oben = 30, Breite = 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(); 

Dank für die Hilfe!

Answer 1

Das Problem ist, dass die Höhe der Steigung nicht relativ zum y1-Startpunkt des Gradienten berechnet wird, berechnet von y0-Startpunkt des Canvas-Elements. Ändern des Codes für y2 zu y2 + y1 (der Endpunkt wird jetzt relativ zum Startpunkt berechnet), behob das Problem.

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