Canvas is not appearing

Question

I have a menu of buttons being displayed, and when I click on one of them, some operations happen and then a canvas with text should be displayed.

Turns out, these operations all happen, but canvasdon’t generate happens... In the browser console no error is displayed.

In html my canvas is like this:

<canvas class="canvasCentral" id="bordas" width="400" height="500">

</canvas>

The css class "canvasCentral" : (The css file is being loaded into the html where this canvas is).

.canvasCentral{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        border:3px solid #D8D8D8;
        border-radius: 20px;
        display:block      //Isso aqui estava "none" para ser exibido somente quando eu quiser. tentei botar "block" mas a canvas continua não aparecendo.

}

THIS IS THE FUNCTION THAT DRAWS CANVAS: It takes a string as a parameter. When performing this function, NOTHING HAPPENS, and the previous menu remains displayed. I marked display "None" in the div of this previous menu also to see. It disappears, but the canvas still does not appear.... NOTE: THE SCRIPT CONTAINING THIS FUNCTION IS CORRECTLY LOADED INTO CANVAS HTML :

   function formaCanvas(res){

        var arrayDaConta = [];


        var agencia="";
        var conta="";
        var saldo="";
        var nome = "";

        var valores = separaValores(res, agencia, conta, saldo, nome);


                var text = "Escrevendo no canvas";
                var moldura = document.getElementById("bordas");

                var ctx = moldura.getContext("2d");
                console.log(ctx);
                console.log("obteve as bordas e o contexto 2d");
                 //A FRASE ACIMA É EXIBIDA NA CONSOLE.... !!!!

                ctx.font = "12pt Arial";
                ctx.fillStyle = "black";
                ctx.textAlign = "center";
                var linhaInicial=30;
                ctx.fillText("SisOnBank - Sistema de Informações do OnBank", 200, linhaInicial);

                var linha = novaLinha(linhaInicial);
                linha = novaLinha(linha);
                ctx.textAlign = "center";
                ctx.fillText("Cliente: "+valores.nome, 200, linha);


                linha = novaLinha(linha);
                ctx.textAlign = "left";
                ctx.fillText("Agência: "+valores.agenciaPreenchida, 20, linha);

                ctx.textAlign = "rigth";
                ctx.fillText("Conta: "+valores.contaPreenchida, 380, linha);

                linha = novaLinha(linha);
                ctx.textAlign = "rigth";
                ctx.fillText("Saldo atual: " +valores.saldoPreenchido, 145, linha);

                linha = novaLinha(linha);


        }

    }

New line auxiliary function:

function novaLinha(line){
            return line+18;
        }

Auxiliary function selectValues: I don’t think it has any influence on the problem, it just returns a string

function separaValores(resultQuery, agencia, conta, saldo, nome){
        /* ESTE LAÇO SEPARA DA STRING DA QUERY VINDA DO PHP (RES)
    O NÚMERO DE AGÊNCIA, DA CONTA E O SALDO */

    var alfabetico = /\w/;
    for (var x=0; x<resultQuery.length; x++){
            //PEGA O NÚMERO DA AGÊNCIA
        if(agencia.length == 0){
            while(isNumero(resultQuery[x])){
                agencia = agencia.concat(resultQuery[x]);
                x++;
            }
        }

        //PEGA O NÚMERO DA CONTA
        if (resultQuery[x] == "," && conta.length==0 && agencia.length != 0){
            x++; x++;
            while(isNumero(resultQuery[x])){
                conta = conta.concat(resultQuery[x]);
                x++;
            }
        }

        //PEGA O SALDO
        if (resultQuery[x] == "," && conta.length != 0 && agencia.length != 0){
            x++;x++
            while(isNumero(resultQuery[x])){
                saldo = saldo.concat(resultQuery[x]);
                x++;
            }
        }

        if (alfabetico.test(resultQuery[x]) && conta.length != 0 && agencia.length != 0 && saldo.length !=0){
            while(resultQuery[x] != "\""){
                nome = nome.concat(resultQuery[x]);
                x++;
            }
        }
    }

I don’t know but what to do. I appreciate the tips. ;)

Answer 1

The canvas style "display" was missing as "block". It was None. I simply added this line to the function formaCanvas(res), right after the frame variable is filled with the canvas element:

moldura.style.display = "block";