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

Drawing an image with the HTML Canvas

Ike@ACE
12-Amethyst

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
12-Amethyst
(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

1 REPLY 1
Ike@ACE
12-Amethyst
(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

Announcements

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection