cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Have a PTC product question you need answered fast? Chances are someone has asked it before. Learn about the community search. X

Drawing an image with the HTML Canvas

Ike@ACE
13-Aquamarine

Drawing an image with the HTML Canvas

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());
}
1 ACCEPTED SOLUTION

Accepted Solutions
Ike@ACE
13-Aquamarine
(To: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.

View solution in original post

2 REPLIES 2
Ike@ACE
13-Aquamarine
(To: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.

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.

Top Tags