Uncaught TypeError when calling drawImage

Question

Bonjour!

I am trying to use a canvas element in ReactJS. I get an error when calling drawImage (). Does everything work except drawImage () ..?

Uncaught TypeError: Failed to execute 'drawImage' in 'CanvasRenderingContext2D': the supplied 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

Are you sure image.jpg was loaded before drawImage () was called?

From w3schools :

Note. You cannot call the drawImage () method before loading the image. To make sure the image is loaded, you can call drawImage () from window.onload () or from document.getElementById ("imageID"). Load