I am using fabricjs version 5.2.1 to layer images on top of each other. At first, the load order was not always correct, because the canvas would load the images before the previous image was completed loading. I found this excellent post on stackoverflow that worked flawlessly to load the images. Fabric.js add images order The only slight change I made to that example was var SelfLoadingImage = fabric.util.createClass(fabric.Image, { instead of var SelfLoadingImage = fabric.util.createClass(fabric.Object, {. I assumed I would need the self-loading image to be of type Image in order to manipulate the image.

However, the object that is created by this method does not appear to be the same as the object that gets created by fabric.Image.fromURL.

When I attempt to applyFilters on any of these images, it returns the error: Uncaught TypeError: Cannot read properties of undefined (reading 'naturalWidth') at klass.applyFilters (fabric.js:23335:36)

Is there a way to force the object that gets created by the ctx.drawImage to be the same as a normal fabric.Image object?