JavaScript Failed to execute 'drawImage'
The problem was the way that I was loading my Images, I should've been doing:
var image = new Image();image.src = "imagesource.jpg";But instead I was get the elements by id from the document page.
Resources:
you should wait all elements load,so do like this:
window.onload=function(){ board.drawImage(document.getElementById("player_explode"), this.x, this.y);}
For people in 2021 learning React, you have to call the context.drawImage() in the img.onload or nothing will be shown on the canvas! Here is a real world working example:
useEffect(() => { canvasRef.current.width = mapXYWH.w * UNIT canvasRef.current.height = mapXYWH.h * UNIT const context = canvasRef.current.getContext("2d") map.map(o => { const img = new Image(o.width*UNIT,o.height*UNIT) img.src = o.normal img.onload = () => context.drawImage(img, (o.x-mapXYWH.x)*UNIT, (o.y-mapXYWH.y)*UNIT) })}, [map, mapXYWH])See also: React -- Canvas Won't Draw Image