I found the error, the image was being called in drawImage() before it was loaded, unfortunately I did not receive any error that could inform me of this. But I did work by changing the function to:

function drawHUD() { const imgHUD = new Image(); imgHUD.src = './my_hud_image.png'; imgHUD.onload = function(){ HUD_CTX.drawImage(imgHUD, 0, 0, 256, 256, 0, 0, 256, 256); }; imgHUD.onerror = function(){ alert("Image error."); }; } 

I think it will be interesting to load all the images and hunting for their possible errors in a separate script called resources.js by example, where I load everything that is necessary for the game to run, before it starts.

I found the error, the image was being called in drawImage() before it was loaded, unfortunately I did not receive any error that could inform me of this. But I did work by changing the function to:

function drawHUD() { const imgHUD = new Image(); imgHUD.src = './my_hud_image.png'; imgHUD.onload = function(){ HUD_CTX.drawImage(imgHUD, 0, 0, 256, 256, 0, 0, 256, 256); }; imgHUD.onerror = function(){ alert("Image error."); }; } 

I think it will be interesting to load all the images and hunting for their possible errors in a separate script called resources.js by example, where I load everything that is necessary for the game to run, before it starts.

to read more about Image:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images