Trouble using HTML Canvas with Vue.js

Question

I am trying to upload an image using HTML canvas. The reason that I am using canvas, is because depending on the data I get back from the api, I will be super-imposing other little images over it, and this seems easier to do in canvas.

I am trying to create a new html image like this:

    const imgObj = new Image()
    imgObj.src = '../../pic'
    ctx.drawImage(imgObj, 200, 200)

When I try to use this code in vue.js (as part of a javscript function called during the "onCreate" part of the life cycle), I am told that Image() is not defined.

So instead I have tried this:

    const imgObj = document.createElement('img')
    imgObj.src = '../../pic'
    ctx.drawImage(imgObj, 20, 20)

As far as I understand it, this should do that same thing, but nothing renders when I do this.

If I simply insert an <img> into the html, the picture loads, just fine, but as I said above, I will be overlapping a bunch of smaller photos on top, and working with a bunch of images seems a lot easier to manage with canvas.

Any advice is appreciated.

Hans Felix Ramos · Accepted Answer · 2020-05-06 17:47:33Z

1

In your second way, you need to call drawImage inside onload function:

const imgObj= document.createElement('img')
imgObj.src = '../../pic'

imgObj.onload = function () {
   ctx.drawImage(imgObj, 20, 20)
}

edited May 6, 2020 at 17:47

answered May 5, 2020 at 19:38

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Over a year ago

This doesn't seem to work. I'm also not sure if this needs to be called within onload because this code is being executed in vue's created portion of the lifecycle, which seemingly does the same as using onload Also, you are using img two times, and imgObj two times, but imgObj is not defined. Are all four of those instances supposed to be the same variable?

Hans Felix Ramos Over a year ago

If you create a new Image, It won't be loaded by the time they are added to the canvas.

Brian Over a year ago

This works. I'm not sure what I was doing wrong before. Thanks.

Collectives™ on Stack Overflow

Trouble using HTML Canvas with Vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related