Changing color for fillText() on HTML5 <canvas>

Question

I am trying to change the color for each line of my messages on canvas, but no success so far. I have tried creating variable for each one of them, but still no luck. any help would be appreciated.

function initiate(){     var elem = document.getElementById("canvas");     canvas = elem.getContext("2d");     addEventListener("mousemove", animation);      canvas.shadowColor = "rgba(0, 0, 0, 0.5)";     canvas.shadowOffsetX = 4;     canvas.shadowOffsetY = 4;     canvas.shadowBlur = 5;      canvas.font = "bold 24px verdana, sans-serif ";     var welcomeMessage ="Welcome to the store!";     canvas.textAlign = "start";     canvas.textBaseline = "bottom";     canvas.fillText(welcomeMessage, 400, 50);      canvas.font = "bold 14px verdana, sans-serif";     var message2 = "Your favorite store for videos games and latest DVDs!";      canvas.textAlign = "start";     canvas.textBaseline = "bottom";     canvas.fillText(message2, 400, 100);      canvas.font = "bold 12px verdana, sans-serif";     canvas.textAlign = "start";     canvas.textBaseline = "bottom";     // Create gradient     //var gradient=canvas.createLinearGradient(0,0,c.width,0);     //gradient.addColorStop("0","magenta");     //gradient.addColorStop("0.5","blue");     //gradient.addColorStop("1.0","red");     //canvas.fillStyle = gradient;     canvas.fillText(" <-- Move your mouse aroud to interact with Macroplay smily!", 400, 250);   } 

Answer 1

you have to set the color for the text.

Something like this:

const canvasObj = document.getElementById('canvas') const context = canvasObj.getContext('2d')  context.font = "bold 24px verdana, sans-serif "; var welcomeMessage = "Welcome to the store!"; context.textAlign = "start"; context.textBaseline = "bottom"; context.fillStyle = "#ff0000"; //<======= here context.fillText(welcomeMessage, 10, 50);  context.font = "bold 14px verdana, sans-serif"; var message2 = "Your favorite store for videos games and latest DVDs!"; context.textAlign = "start"; context.textBaseline = "bottom"; context.fillStyle = "#00ff00"; //<======= and here context.fillText(message2, 10, 100);

<canvas id="canvas" width="400" height="100"></canvas>

Also, it could be a good idea to name your context variable "context" or "cxt" instead of "canvas". It would be less confusing :)

Answer 2

Have you tried simple fillStyles like:

  canvas.fillStyle = "#ff00ff"; 

The text rendering on <canvas> might not support advanced fill styles.

Just set new fillStyle before rendering each message.