Skip to main content
15-Moonstone
July 8, 2021
Solved

Drawing an image with the HTML Canvas

  • July 8, 2021
  • 1 reply
  • 2006 views

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());
}
Best answer by Ike@ACE

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.

1 reply

Ike@ACE15-MoonstoneAuthorAnswer
15-Moonstone
July 20, 2021

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.

13-Aquamarine
November 25, 2022

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.