Why can't I call this function in React?

Question

I'm getting the error:'TypeError: this.createCanvas is not a function'.

I don't understand why. I've bound it in the constructor.

import React, { Component } from 'react';

class ImageEditor extends Component {

constructor() {
    super();
    this.createCanvas = this.createCanvas.bind(this);
    this.getImageDimensions = this.getImageDimensions.bind(this);
}

componentDidMount() {
    const imageurl = "https://storage.googleapis.com/" + this.props.location.state.imageuri;
    this.getImageDimensions(imageurl);
}

getImageDimensions(url) {
    var img = new Image();

    img.onload = function() {
        this.createCanvas(this.width, this.height);
    }

    img.src = url;
}

createCanvas(width, height) {
    let mycanvas = document.createElement("canvas");
    mycanvas.width = width;
    mycanvas.height = height;
    mycanvas.id = "mycanvas";
    document.body.appendChild(mycanvas);
}

render() {
    return (
        <h1>{this.imageurl}</h1>
    )
}

}

export default ImageEditor;

Answer 1

Your img.onload has to be given an arrow function as well, or this will not be what you want. You can read more about why this is the case here.

img.onload = () => {
    this.createCanvas(img.width, img.height);
}