Uncaught TypeError: Cannot read property 'width' of null

Question

I'm trying out fabric.js, and right now I'm trying to put in an image to experiment with.

I've followed the tutorial but even so I get the following error:

Uncaught TypeError: Cannot read property 'width' of null

... which refers to line 14805 in all.js:

_setWidthHeight: function(options) {
    this.width = 'width' in options
        ? options.width
        : (this.getElement().width || 0);    // <------ this line
    this.height = 'height' in options
        ? options.height
        : (this.getElement().height || 0);
},

My code (html):

...
<div id="avatarBox">
    <canvas id="canvas" width="500" height="500"/>
    <img src="img/test.png" id="my-image">
</div>
...

My code (js):

var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('my-img');

var imgInstance = new fabric.Image(imgElement, {
    left: 100,
    top: 100,
    angle: 30,
    opacity: 0.85
});

canvas.add(imgInstance);

What can be wrong?

Answer 1

You don't have "my-img" in your html. You have "my-image", maybe the problem comes from there?