Question

I want to make a gradient text with canvas and my pc renders the code correct, but android displays it like normal gradient with the text inside of it. How can i solve this problem, if it’s possible?
Here’s the javascript:

function text() {
var canvas = document.getElementById('header-text');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 29);
gradient.addColorStop(0, "#fcfcfc");
gradient.addColorStop(1, "#ccc");
ctx.font = "bold 29px helvetica, arial, sans-serif";
ctx.shadowColor = "#232323";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.fillStyle = gradient;
ctx.fillText("Company name", 0, 23);
}

Answer 1

Sorry to say, it’s a bug.

Or rather, the gradient for fillText is not yet implemented on the android browser. If you write this:

var gradient = ctx.createLinearGradient(0, 0, 0, 29);
gradient.addColorStop(0, "#fcfcfc");
gradient.addColorStop(1, "#ccc");
ctx.fillStyle = 'red';
ctx.fillStyle = gradient; // replace the fillstyle with a gradient
ctx.fillText("Testing", 0, 23);
ctx.fillRect(0,0,20,20)

You will see that both the text and the rectangle have the gradient in Chrome.

See it live here.

But on the android device the text will be red and the rect will be a gradient!

Chrome itself still doesn’t have full support for all the canvas gradient cases that were laid out by the specification author (himself a Google employee). I submitted a bug report about it here.