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} />;
    }
});

Evgeny Samsonov Evgeny Samsonov · Accepted Answer · 2015-07-16T15:00:07

Are you sure the image.jpg has been loaded before you call drawImage()?

From w3schools:

Note: You cannot call the drawImage() method before the image has loaded. To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById("imageID").onload.

Uncaught TypeError when calling drawImage function

2 Answers