Firefox loadImage error: An attempt was made to use an object that is not, or is no longer, usable

[dennispassway]

I'm trying to load an image and display it with the display function. This works fine in all browsers, except for in Firefox where it Throws the error: "An attempt was made to use an object that is not, or is no longer, usable".

It is thrown by
p5.Renderer2D.prototype.image
at this line:
this.drawingContext.drawImage(cnv, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

This is how I use it:

this.sketch.loadImage(logoImage, (image) => {
  const offset = this.elementSize

  this.logo = new Image(
    this.sketch,
    this.sketch.width - offset,
    this.sketch.height - (offset / 2),
    this.elementSize,
    image
  )

  this.display()
})

In this example, Image is a class that creates an object by using this code

sketch.image(
  this.image,
  0, 0,
  elementSize, elementSize
)

It looks like the image onload is called too early when I log this.logo it seems fine. Any clues?

[toolness]

Thanks for the bug report!

Hmm, I'm not sure what's going wrong here--do you think you could provide a self-contained sketch that can serve as a simplified "test case" so we can easily reproduce and debug the problem?

[lmccart]

hey @dennispassway any updates on this? could you give us some sample code as @toolness requested? I'd love to take a look but I'm not currently able to reproduce.
one thing to check... are you loading the image either in preload() or putting the image() drawing call inside a callback? it could be that firefox is trying to draw an image that hasn't been loaded yet and doesn't fail as gracefully as some other browsers.

[lmccart]

I'm going to close this for now since we can't seem to reproduce. Please feel free to reopen with the requested simplified test sketch.

[Timothy-Tolley]

I've found that loadImage function doesn't work for SVG on firefox but does work on chrome and safari. I know SVG isnt explicitly supported but I think that the SVG loading is the issue on firefox. Firefox gives the error:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable p5.js:13990 [55]</p5.Renderer2D.prototype.image http://localhost:3000/assets/js/p5.js:13990:11 [67]</p5.prototype.image http://localhost:3000/assets/js/p5.js:19350:7 <anonymous> self-hosted:990:17 draw http://localhost:3000/assets/js/sketch.js:13:3 [58]</p5.prototype.redraw http://localhost:3000/assets/js/p5.js:15785:9 p5/this._draw< http://localhost:3000/assets/js/p5.js:11634:11 <anonymous> self-hosted:984:17 p5/this._decrementPreload http://localhost:3000/assets/js/p5.js:11567:11 <anonymous> self-hosted:986:17 [67]</p5.prototype.loadImage/img.onload http://localhost:3000/assets/js/p5.js:19275:11

Super basic example:

var img

function preload() {
  img = loadImage("./assets/logo.svg")
}
function setup() {
  createCanvas(window.innerWidth, window.innerHeight)
}

function draw () {
  clear()
  image(img, x, y)
}

Would be great to be able to load the SVG in firefox as it works everywhere else

Cheers
Tim
@lmccart @toolness

[milkyklim]

This one should be an open issue, @lmccart.

My sketch doesn't work in Firefox and works in Safari. It loads SVG same way as @Timothy-Tolley described above.

I am on p5js version: 0.8.0.

Any work-arounds besides converting image to different format?

[milkyklim]

@Timothy-Tolley I understand that it was a while ago but can you check if your svg had width and height attributes? Those are required for Firefox to process images properly.

Ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image#Specific_attributes

Overall, seems like Firefox problem unrelated to p5js.

[limzykenneth]

@milkyklim This was previously looked at in #2150, to take a link from there

If it is the same FIrefox issue, can we close this issue for now?

[milkyklim]

@limzykenneth haven't seen the issue you've mentioned but this is exactly the problem. Feel free to close this one!