Home / Questions / 369345
Accepted
Sebastián EPH
Asked: 2020-06-29 08:04:54 +0800 CST 2020-06-29 08:04:54 +0800 CST

CANVAS HTML5 - Problem displaying two elements on the canvas

  • 772

What I want to do is display a gradient background on the canvas and then display some text.

The code is the following:

<canvas id="canv" height="720" width="1280">
            Su navegador no es compatible con CANVAS, use otro navegador
</canvas>

function Start() {
    // Genera un área de trabajo
    var elemento = document.getElementById("canv");
    canv = elemento.getContext("2d"); // Especifica entorno

    // Degradado
    gradiente = canv.createLinearGradient(0,0,1280,720);
    gradiente.addColorStop(0,"#f58080");
    gradiente.addColorStop(1,"#8b0e0e");
    canv.fillStyle = gradiente;  // Muestra gradiente
    canv.fillRect(0,0,1280,720);


    // Texto
    // canv.beginPath();
    canv.font = "bold 24px verdana";
    canv.textAlign = "start"; // Espeficia alineación
    canv.fillText("Texto",200,200);
}
Start();

The problem is that when executing it is possible to see that the text appears for a few miniseconds and then the gradient background appears and covers the text

Basically the background covers the text

If I delete the code to show gradient background, as expected, only the TEXT appears

I know I'm doing something wrong, I've been looking but I can't solve it.

html5

1 Answers

  1. Best Answer

    Right now you are filling the text with the same gradients as before. This is why you don't see it. Add canv.fillStyle = "black";(or the color you want) just beforecanv.fillText("Texto",200,200);

    function Start() {
    // Genera un área de trabajo
    var elemento = document.getElementById("canv");
    canv = elemento.getContext("2d"); // Especifica entorno

    // Degradado
    gradiente = canv.createLinearGradient(0,0,1280,720);    gradiente.addColorStop(0,"#f58080");    gradiente.addColorStop(1,"#8b0e0e");
    canv.fillStyle = gradiente;  // Muestra gradiente
    canv.fillRect(0,0,1280,720);


    // Texto
    // canv.beginPath();
    canv.font = "bold 24px verdana";
    canv.textAlign = "start"; // Espeficia alineación
    
    //Establece el color del texto
    canv.fillStyle = "black"; 
  
  
    canv.fillText("Texto",200,200);
}
Start();
    <canvas id="canv" height="720" width="1280">
            Su navegador no es compatible con CANVAS, use otro navegador
</canvas>

    • 4