Drawing an image with the HTML Canvas

[Ike@ACE]

I'm trying to draw an image on the HTML Canvas, but it's not working. I put this into JSFiddle and, with one additional line of code, it works. However, this line of code doesn't help me in Vuforia Studio. What am I missing?

$scope.drawLargeInstructionImage = () => {
    let c = document.createElement("canvas");
    let ctx = canvas.getContext("2d");

    let slideLeftSidePadding = 25;
    let slideTopPadding = 22;
    let slideWidth = 694;
    let slideHeight = 344;

    let slide = new Image();
    slide.src='app/resources/Uploaded/InstructionBackgroundSlide.png';
    console.log(slide);
    slide.onload = () => {
        ctxtwo.drawImage(slide, slideLeftSidePadding, slideTopPadding, slideWidth,  slideHeight);
    };

    document.body.appendChild(ctx.canvas);  //the line of code that fixes the problem in JSFiddle

    tml3dRenderer.setTexture("LargeInstructionImage", c.toDataURL());
}

[Ike@ACE · Accepted solution]

We figured it out. We needed to include a call to the onload function. This seems obvious, but the articles online talked about the onload as an automatic event, so I was expecting it to act as such.

[jsj]

Hi, 

I want to draw function on 2D image using HTML canvas, As far as I understand, you succeed to draw image using HTML.

But, I don't know how to configure.

Could you please share the project file which you succeeded?

Please check if you can be possible.

Thanks.