this.beginPath(); this.lineTo(150, 0); this.lineTo(150, 150); this.lineTo(0, 150); this.lineTo(0, 0); this.closePath(); var g = this.createLinearGradient(x0,y0,x1,y1) //this.globalAlpha = 0; g.addColorStop(0, 0x0cc888); this.globalAlpha = 1; g.addColorStop(1, 0xb60cc1); this.fillStyle = g; this.fill(); this.beginPath(); this.moveTo(x0,y0); this.lineTo(x1,y1); // this.needsWork(); this.lineTo( x1-5, y1-5); this.lineTo( x1+5, y1+5); this.lineTo( x1-5, y1+5); this.lineTo( x1+5, y1-5); this.strokeStyle = 0; this.lineWidth = 2; this.stroke(); The line follows the gradient declaration. The "x" should always land in purple.