I need to add a gradient to a canvas. I have tested all solutions, but nothing works.
Original code:
ctx.strokeStyle = params.wheelBorderColor;
ctx.lineWidth = params.wheelBorderWidth;
ctx.font = params.wheelTextFont;
ctx.clearRect(0, 0, 500, 500);
var text = null,
i = 0,
totalJoiner = pplLength;
var width = ctx.measureText(text).width + blur * 2;
for (i = 0; i < totalJoiner; i++) {
text = pplArray[i];
var angle = startAngle + i * arc;
ctx.fillStyle = colorCache.length > totalJoiner ? colorCache[i] : genHex(text);
ctx.beginPath();
// ** arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
ctx.arc(250, 250, params.outterRadius, angle, angle + arc, false);
ctx.arc(250, 250, params.innerRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.fillStyle = params.wheelTextColor;
ctx.translate(250 + Math.cos(angle + arc / 2) * params.textRadius, 250 + Math.sin(angle + arc / 2) * params.textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 1);
ctx.fillText(text, -ctx.measureText(text).width / 2, 6);
ctx.restore();
ctx.closePath();
}
drawArrow();
And i add this code for gradiant and the fill() is already sent to original code
var grd = ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000);
// Add colors
grd.addColorStop(0.000, 'rgba(0, 0, 0, 1.000)');
grd.addColorStop(1.000, 'rgba(255, 255, 255, 1.000)');
// Fill with gradient
ctx.fillStyle = grd;
ctx.fill();
The genHex()
is:
color = "#666"; colorCache.push('#'+color); return '#'+color;"
Any guidance would be helpful.