Cambio de color para fillText () en HTML5

Estoy tratando de cambiar el color de cada línea de mis mensajes en el lienzo, pero hasta ahora no he tenido éxito. He intentado crear variables para cada uno de ellos, pero aún no he tenido suerte. Cualquier ayuda sería apreciada.

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);


}

usted tiene que establecer el color para el texto.

Algo como esto:

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>

Además, podría ser una buena idea nombrar su variable de contexto “context” o “cxt” en lugar de “canvas”. Sería menos confuso 🙂

¿Has probado estilos de relleno simples como:

  canvas.fillStyle = "#ff00ff";

La representación del texto en <canvas> es posible que no admita estilos de relleno avanzados.

Simplemente establezca un nuevo estilo de relleno antes de mostrar cada mensaje.

usar

canvas.fillStyle = "steelblue";