Uncaught TypeError when calling drawImage function

Question

Bonjour!

I'm trying to make use of canvas element under ReactJS. I'm getting an error when i call drawImage(). Everything work except the drawImage().. ?

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

var Canvas = React.createClass({
    componentDidUpdate: function() {
        console.log("componentDidUpdate");
    },

    componentDidMount: function() {
        var context = this.getDOMNode().getContext('2d');
        this.paint(context);
    },

    paint: function(context) {
        context.save();
        context.fillStyle = '#F00';
        context.fillRect(0, 0, 400, 400);
        context.drawImage("image.jpg", 0, 0);
        context.restore();
    },

    render: function(){
        return <canvas width={400} height={400} />;
    }
});

Answer 1

This happened to me.

I did drawImage(x, y, img); by accident, when it should be drawImage(img, x, y); Check to make sure your arguments are in the correct order

After I did that, it still didn't work. I was using Promises.all() (from this answer: https://stackoverflow.com/a/53290838/2336212) and didn't realize that the result was an array of all passed in values. I mistakenly passed resolve(images). Instead of receiving an array of images, I received an array of arrays of images. Make sure you only pass a single object back through resolve() unless you expect a 2D array. I changed it to resolve(image) and it worked.