Skip to main content
Inspiring
November 9, 2018
Answered

HTML5 Canvas Gradient Dynamic Text.

  • November 9, 2018
  • 1 reply
  • 792 views

Is there a way to do a gradient on dynamic text with HTML5 canvas in Adobe Animate. I could probably get it to work by manually editing the exported HTML but just wondering if there is a way to do it from with in Animate. I am thinking appending CSS to the dynamic text as a way to do it. Has anyone done this.

This topic has been closed for replies.
Correct answer ClayUUID

var txt = this.myText;

var fill = canvas.getContext("2d").createLinearGradient(0, 0, 0, txt.getBounds().height);

fill.addColorStop(0, "#F00");

fill.addColorStop(0.5, "#0F0");

fill.addColorStop(1, "#00F");

txt.color = fill;

CanvasRenderingContext2D.createLinearGradient() - Web APIs | MDN

1 reply

avid_body16B8
Legend
November 9, 2018
ClayUUIDCorrect answer
Legend
November 9, 2018

var txt = this.myText;

var fill = canvas.getContext("2d").createLinearGradient(0, 0, 0, txt.getBounds().height);

fill.addColorStop(0, "#F00");

fill.addColorStop(0.5, "#0F0");

fill.addColorStop(1, "#00F");

txt.color = fill;

CanvasRenderingContext2D.createLinearGradient() - Web APIs | MDN