Uncaught TypeError: Cannot read property 'getContext'

Question

Hi guys I am new to JS and still learning. Now that is out of the way, I am trying to create a pdf when a button is clicked. However, I am getting the error "Uncaught TypeError: Cannot read property 'getContext' of null".

I am creating two canvases. The first one works fine but I cannot understand why is it not working for the second one. I have searched the error and have learnt that it usually occurs when the code runs before html loads. However, my script code is at the end of body. Also the error occurs at the second getContext('2d') even before the image is referenced not the first one.

function cPdf() {

    //  The code below creates a new canvas to draw the chart
    //****************************************************************


    var conHeight = document.getElementById("chart-container").offsetHeight;
    var conWidth = document.getElementById("chart-container").offsetWidth;

    var pdfCanvas = document.createElement("canvas");
    pdfCanvas.id = "canvasPdf";
    pdfCanvas.width = conWidth;
    pdfCanvas.height = conHeight;

    var pdfctx = pdfCanvas.getContext("2d");

    var canvasHeight = document.getElementById("chart").offsetHeight;
    var canvasWidth = document.getElementById("chart").offsetWidth;

    pdfctx.drawImage(document.getElementById("chart"), 0, 0, canvasWidth, canvasHeight);

    //*****************************************************************
    //  Chart copied on canvas and ready to be added to the pdf 

    //  The code below creates a new canvas to draw the logo
    //****************************************************************   

    var myCanvas = document.createElement("canvas");
    myCanvas.setAttribute("id", "logoCanvas");
    myCanvas.width = 250;
    myCanvas.height = 150;
    //
        var c = document.getElementById("logoCanvas");
        var ctx = c.getContext("2d");
    //  var img = document.getElementById("logo");
    //  ctx.drawImage(img, 0, 0);

    //*****************************************************************
    //  logo copied on canvas and ready to be added to the pdf

    var pdf = new jsPDF('p', 'mm', "A4");
    pdf.setFont("Lucida Grande");

    pdf.addImage(pdfCanvas, 'PNG', 35, 10);

    source = document.getElementById("oTable");
    margins = {
        top: 80,
        bottom: 20,
        left: 20,
        width: 400
    };
    pdf.fromHTML(
        source,
        margins.left,
        margins.top, {
            // y coord
            width: margins.width;
        },
        function () {
            pdf.save("Test.pdf");
        },
        margins
    );
}
'''

Answer 1

document.getElementById does work with dynamically added elements.
You can use myCanvas directly like your first getContext().

// var c = document.getElementById("logoCanvas");
// var ctx = c.getContext("2d");
var ctx = myCanvas.getContext("2d");

If you want to use queryElementById() for your canvas, you shoud append elemnet before.