I am trying to draw a text with a gradient. My Text render function is inspired by konva and should support gradients. Gradients for other shapes are working fine with this library, but gradient texts are not rendered.
const {
fillLinearGradientStartPoint,
fillLinearGradientEndPoint,
fillLinearGradientColorStops
} = this.attrs;
let linGrd = await this.ctx.createLinearGradient(
fillLinearGradientStartPoint.x,
fillLinearGradientStartPoint.y,
fillLinearGradientEndPoint.x,
fillLinearGradientEndPoint.y
);
// Transform Array of Stops ([0, color1, 1, color2, ...]) to canvas Stops
for (let index = 0; index < fillLinearGradientColorStops.length; index++){
if(index % 2 === 0){
linGrd.addColorStop(fillLinearGradientColorStops[index], fillLinearGradientColorStops[index + 1]);
}
}
this.ctx.fillStyle = linGrd;
this.ctx.fillText(text, x, y);
I am trying to draw a text with a gradient. My Text render function is inspired by konva and should support gradients. Gradients for other shapes are working fine with this library, but gradient texts are not rendered.
Are gradient texts not supported?
Sample Code: